Dans un exemple de la page de documentation React Formulaires , ES6 La syntaxe de propriété calculée est utilisée dans une méthode pour définir l'état de la propriété name .
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
D'après ma lecture du fonctionnement de la propriété calculée, il semble que la raison pour laquelle elle est utilisée est si target.name peut être changé - est-ce le cas? Si tel est le cas, il semble qu'il serait simplement plus facile de le modifier ici dans setState plutôt que de changer la valeur de la variable name .
I Je suis nouveau dans React et j'ai du mal à comprendre comment la syntaxe des propriétés calculées est appliquée dans cet exemple. Toute aide serait grandement appréciée.
5 Réponses :
Parce que vous ne voulez pas définir la propriété "name", mais la propriété dont le nom est stocké dans name.
var name = "test";
// these are all equal:
this.setState({ [name]: 1 })
this.setState({ ["test"]: 1 })
this.setState({ test: 1 })
Lorsque vous encapsulez une clé avec des crochets dans le tableau, elle obtiendra le nom de la variable sous forme de clé.
Si vous ne le faites pas, la clé sera une chaîne. Alors ...
let name = 'id';
let obj = { //let obj = {
[name]:1 // id: 1
}; //};
Si vous n'utilisez pas la syntaxe de propriété calculée, votre fonction définirait toujours la propriété name au lieu de la valeur calculée à partir de event.target.name , qui est ce que tu veux. Votre état ressemblerait toujours à ceci:
console.log(this.state);
// -> { name: 'some value' }
Pourquoi utiliser la syntaxe des propriétés calculées ES6 pour l'objet setState?
La syntaxe des propriétés calculées vous permet de définir la clé d'un objet de manière dynamique .
Dans le cas de
setState, il permet de gérer différentes propriétés de l'état avec un seulsetState, et ainsi de réutiliser le même gestionnaire d'événements fonction sur différentes entrées.Donc au lieu de:
class Reservation extends React.Component { constructor(props) { super(props); this.state = { isGoing: true, numberOfGuests: 2 }; this.handleInputChange = this.handleInputChange.bind(this); } // a single handler, for isGoing and numberOfGuests handleInputChange(event) { const target = event.target; const value = target.type === 'checkbox' ? target.checked : target.value; const name = target.name; this.setState({ [name]: value }); } render() { return ( <form> <label> Is going: <input name="isGoing" type="checkbox" checked={this.state.isGoing} onChange={this.handleInputChange} /> </label> <br /> <label> Number of guests: <input name="numberOfGuests" type="number" value={this.state.numberOfGuests} onChange={this.handleInputChange} /> </label> </form> ); } }Vous pouvez le raccourcir comme ceci:
class Reservation extends React.Component { constructor(props) { super(props); this.state = { isGoing: true, numberOfGuests: 2 }; this.handleIsGoingChange = this.handleIsGoingChange.bind(this); this.handleNumberOfGuestsChange = this.handleNumberOfGuestsChange.bind(this); } // a first handler, for isGoing handleIsGoingChange(event) { const target = event.target; const value = target.checked; this.setState({ isGoing: value }); } // a second handler, for numberOfGuests handleNumberOfGuestsChange(event) { const target = event.target; const value = target.value; this.setState({ numberOfGuests: value }); } render() { return ( <form> <label> Is going: <input name="isGoing" type="checkbox" checked={this.state.isGoing} onChange={this.handleIsGoingChange} /> </label> <br /> <label> Number of guests: <input name="numberOfGuests" type="number" value={this.state.numberOfGuests} onChange={this.handleNumberOfGuestsChange} /> </label> </form> ); } }
Peut-être qu'en écrivant sans la syntaxe ES6, vous comprendrez mieux ce qui se passe.
Le même code serait celui ci-dessous (vous pouvez l'exécuter dans l'extrait de code et le voir)
Une chose que je dirait si on utilise let au lieu de const simplement parce que les variables créées avec const pointent ou se lient constamment à la même valeur tant qu'elles "vivent ".
Donc, utiliser const ici peut ne pas vous permettre de cocher et / ou décocher la case, ni d'augmenter / diminuer le nombre.
J'espère que cela vous aidera à mieux comprendre. p>
Merci
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
let value;
if(event.target.type==='checkbox'){
value = event.target.checked
}
else {
value = event.target.value
}
this.setState({
[event.target.name]: value
});
}
render() {
return (
<form>
<label>
Is going:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Number of guests:
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}
ReactDOM.render(
<Reservation />,
document.getElementById('root')
);
"Pourquoi ne pas simplement utiliser nom: valeur" bien parce que vous voulez que le nom de la propriété soit la valeur de
nom. Considérezconst name = 'test'; console.log ({[nom]: 1}, {nom: 1})Cela permet au même gestionnaire de travailler pour plusieurs entrées, et chaque entrée ayant son propre état.