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?

154
demandé sur Community 2015-03-26 17:01:43

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 });
}
200
répondu trad 2016-12-23 09:59:59

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 });
}
70
répondu vikram jeet singh 2017-09-14 02:03:53

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)
},
36
répondu sintaxi 2016-07-25 08:18:17

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 });
},
5
répondu saulable 2018-07-03 18:13:00

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 :)

2
répondu Johnatan Maciel 2018-07-03 18:14:22

peut utiliser une syntaxe de propagation, quelque chose comme ceci:

inputChangeHandler : function (event) {
    this.setState( { 
        ...this.state,
        [event.target.id]: event.target.value
    } );
},
-3
répondu sta 2017-03-14 10:16:27