Reactjs setState () avec un nom de clé dynamique?
EDIT: c'est un doublon, voir ici
Je ne trouve aucun exemple d'utilisation d'un nom de clé dynamique pour définir l'état. C'est ce que je veux faire:
inputChangeHandler : function (event) {
this.setState( { event.target.id : event.target.value } );
},
where event.cible.id est utilisé comme clé d'État à mettre à jour. Ce n'est pas possible de Réagir?
6 réponses
grâce à l'allusion de @Cory, j'ai utilisé ceci:
inputChangeHandler : function (event) {
var stateObject = function() {
returnObj = {};
returnObj[this.target.id] = this.target.value;
return returnObj;
}.bind(event)();
this.setState( stateObject );
},
si vous utilisez ES6 ou le Babel transpiler pour transformer votre code JSX, vous pouvez l'accomplir avec noms de propriété calculés , aussi:
inputChangeHandler : function (event) {
this.setState({ [event.target.id]: event.target.value });
// alternatively using template strings for strings
// this.setState({ [`key${event.target.id}`]: event.target.value });
}
lorsque vous avez besoin de gérer plusieurs éléments d'entrée contrôlés, vous pouvez ajouter un attribut de nom à chaque élément et laisser la fonction handler choisir ce qu'il faut faire en fonction de la valeur de l'événement.cible.nom.
par exemple:
inputChangeHandler(event) {
this.setState({ [event.target.name]: event.target.value });
}
comment j'ai fait ça...
inputChangeHandler: function(event) {
var key = event.target.id
var val = event.target.value
var obj = {}
obj[key] = val
this.setState(obj)
},
je voulais juste ajouter, que vous pouvez aussi déstructurer pour reformuler le code et le rendre plus net.
inputChangeHandler: function ({ target: { id, value }) {
this.setState({ [id]: value });
},
en boucle avec .map
travailler comme ceci:
{
dataForm.map(({ id, placeholder, type }) => {
return <Input
value={this.state.type}
onChangeText={(text) => this.setState({ [type]: text })}
placeholder={placeholder}
key={id} />
})
}
Notez le []
dans le paramètre type
.
Espérons que cela aide :)
peut utiliser une syntaxe de propagation, quelque chose comme ceci:
inputChangeHandler : function (event) {
this.setState( {
...this.state,
[event.target.id]: event.target.value
} );
},