J'ai attribué des valeurs par défaut à la balise d'entrée. Lorsque j'essaye de soumettre sans changer les valeurs de la balise d'entrée, la valeur transmise n'est pas définie.
Ce que je veux, c'est que si la valeur d'entrée est modifiée, mettre à jour la valeur d'état avec la nouvelle valeur et si la valeur de la balise d'entrée n'est pas modifiée, puis passer la valeur par défaut à l'état.
Je suis nouveau sur React.
import React, { Component } from 'react';
import Firebase from '../Firebase';
import _ from 'lodash';
import '../App.css';
class Modify extends Component {
constructor(props) {
super(props);
//state
this.state = {
personDetails: {},
detail: ''
};
//bind
this.renderData = this.renderData.bind(this);
this.handleChange = this.handleChange.bind(this);
this.saveEdit = this.saveEdit.bind(this);
}
//lifecycle
componentDidMount() {
Firebase.database().ref('/nannydetails').on('value', (snapshot) => {
this.setState({
personDetails: snapshot.val()
})
})
}
//handle change
handleChange(event) {
this.setState({
[event.target.name]: event.target.value.toLowerCase()
});
}
//render data
renderData() {
return _.map(this.state.personDetails, (personDetail, key) => {
return(
<div className="pt-2 pb-1 m-2 border border-dark bg-warning row" key={key}>
<div className="col-md-3 col-xs-3 text-right">
<img src={require('./profile.png')} alt="cam"/>
</div>
<div className="col-md-9 col-xs-9 p-2">
<div className="headline">
<h1>Full Name: </h1>
<input className="form-control" type="text" name="fullName" defaultValue={personDetail.fullname} onChange={this.handleChange}/>
</div>
<div className="headline">
<h1>Contact Number: </h1>
<input className="form-control" type="text" name="phone" defaultValue={personDetail.phone} onChange={this.handleChange}/>
</div>
<div className="headline">
<h1>Experience: </h1>
<input className="form-control" type="text" name="experience" defaultValue={personDetail.experience} onChange={this.handleChange}/>
</div>
<div className="headline">
<h1>City: </h1>
<input className="form-control" type="text" name="city" defaultValue={personDetail.city} onChange={this.handleChange}/>
</div>
<div className="headline">
<h1>State: </h1>
<input className="form-control" type="text" name="state" defaultValue={personDetail.state} onChange={this.handleChange}/>
</div>
<button className="btn btn-success" type="button" onClick={() => this.saveEdit(key)}><i className="fa fa-pencil-square-o"></i> Save Edit</button>
<button className="btn btn-danger" type="button" onClick={() => this.handleDelete(key)}><i className="fa fa-trash"></i> Delete</button>
</div>
</div>
)
});
}
//handle save edit
saveEdit(key) {
// Firebase.database().ref(`/nannydetails/${key}`).push({
// fullname: this.state.fullname,
// phone: this.state.phone,
// experience: this.state.experience,
// city: this.state.city,
// state: this.state.state
// });
console.log(this.state.fullname);
console.log(this.state.phone);
console.log(this.state.experience);
console.log(this.state.city);
console.log(this.state.state);
}
//handle delete
handleDelete(key) {
const user= Firebase.database().ref(`/nannydetails/${key}`);
user.remove();
}
render() {
return (
<div className="container mt-4">
{this.renderData()}
</div>
);
}
}
export default Modify;
4 Réponses :
Faites-en un composant contrôlé. Fournissez un état initial dans votre composant et toutes les mises à jour seront effectuées dans l'état et qui se refléteront directement dans votre composant.
État initial:
input className="form-control" type="text" name="fullName" value={this.state.personDetail.fullname} onChange={this.handleChange}
Champ de saisie
this.state = {
personDetails: {
fullname :'test'
},
detail: ''
};
en fait, j'utilise Firebase. donc je veux mettre à jour les données de la base de feu en utilisant reactjs
setState prend également une fonction de rappel. Ainsi, après la mise à jour de l'état dans setState, vous pouvez ajouter votre fonction firebase dans le rappel. c'est-à-dire: - setState ({prénom: 'bonjour'}, () => {fonction Firebase})
La meilleure façon d'aborder est qu'un composant principal prenne les données de n'importe quelle api (firebase dans votre cas) et un deuxième composant enfant qui sera chargé de prendre les entrées comme accessoires et de renvoyer l'entrée (par défaut / modifiée) sur l'action du formulaire ( nous faire parvenir). De cette façon, si les données changent, vous obtenez des données modifiées, sinon celles par défaut.
class FormComp extends React.Component {
constructor(props) {
super(props);
this.state = {
name: this.props.form.name,
};
this.submit = this.submit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
submit(e) {
e.preventDefault();
console.log(this.state);
}
handleChange(e) {
this.setState({name: e.target.value});
}
handleChan
render() {
return (
<div>
<form onSubmit={this.submit}>
<input
type="text"
value={this.state.name}
onChange={this.handleChange}
/>
<button type="submit">Submit</button>
</form>
</div>
);
}
}
Reportez-vous à ce violon par exemple. https://jsfiddle.net/papish19/ys6utv3k/7/
Veuillez ne pas définir et lier des fonctions à l'intérieur de la fonction de rendu, ce n'est pas une bonne pratique.
onChange n'est déclenché que lorsque la valeur de l'entrée change. La valeur defaultValue peut être définie dans l'état initial et la valeur defaultValue est écrasée lorsque la valeur de l'entrée change.
Mettez à jour le gestionnaire de modifications pour mettre à jour / muter l'état existant au lieu d'ajouter une nouvelle propriété (clé), c'est-à-dire sur this.state.personDetails.X vs this.state.X
//handle change
handleChange(event) {
// update the personDetails object you set in state on mount
const newPersonDetails = { ...this.state.personDetails };
newPersonDetails[event.target.name] = event.target.value.toLowerCase();
this.setState({
personDetails: newPersonDetails,
});
}
merci cela a fonctionné. En fait, j'ignorais la fonction onchange
@Parul Bienvenue!
si la valeur de la balise d'entrée n'est pas modifiée, alors pour passer la valeur par défaut à l'étatSi l'entrée ne change pas, react n'appellera pas le rappelonChangepour passer une valeur, par défaut ou non. Ils ne sont probablement pas définis car toutes les propriétés auxquelles vous essayez d'accéder seront surthis.state.personDetails, c'est-à-direthis.state.personDetails.fullname. Vous devez mettre à jour votre gestionnaire onChange pour mettre à jour ces valeurs au lieu d'ajouter de nouvelles propriétés.