Reactjs setState () avec un nom de clé dynamique?

EDIT: ceci est un doublon, voir ici

Je ne trouve aucun exemple d'utilisation d'un nom de clé dynamique lors de la définition de l'état. Voici ce que je veux faire:

inputChangeHandler : function (event) {
    this.setState( { event.target.id  : event.target.value } );
},

où event.target.id est utilisé comme clé d'état à mettre à jour. N'est-ce pas possible dans React?

Grâce à l'indice 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 transpilateur Babel pour transformer votre code JSX, vous pouvez également effectuer cela avec des noms de propriété calculés :

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 devez 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 de gestionnaire choisir quoi faire en fonction de la valeur de event.target.name.

Par exemple:

inputChangeHandler(event) {
  this.setState({ [event.target.name]: event.target.value });
}

Comment j'ai accompli cela ...

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 également utiliser la déstructuration pour refactoriser le code et le rendre plus net.

inputChangeHandler: function ({ target: { id, value }) {
    this.setState({ [id]: value });
},

En boucle avec un .maptravail comme celui-ci:

{
    dataForm.map(({ id, placeholder, type }) => {
        return <Input
            value={this.state.type}
            onChangeText={(text) => this.setState({ [type]: text })}
            placeholder={placeholder}
            key={id} />
    })
}

Notez le paramètre []in type. J'espère que cela t'aides :)

J'avais un problème similaire.

Je voulais définir l'état de stockage de la clé de 2e niveau dans une variable.

par exemple this.setState({permissions[perm.code]: e.target.checked})

Cependant, ce n'est pas une syntaxe valide.

J'ai utilisé le code suivant pour y parvenir:

this.setState({
  permissions: {
    ...this.state.permissions,
    [perm.code]: e.target.checked
  }
});

Avec ES6 +, vous pouvez simplement faire [ ${variable}]

Je cherchais une solution jolie et simple et j'ai trouvé ceci:

this.setState({ [`image${i}`]: image })

J'espère que cela t'aides

this.setState({ [`${event.target.id}`]: event.target.value}, () => {
      console.log("State updated: ", JSON.stringify(this.state[event.target.id]));
    });

Veuillez noter le caractère de citation.

Votre état avec dictionnaire met à jour une clé sans perdre d'autre valeur

state = 
{   
    name:"mjpatel"  
    parsedFilter:
    {
      page:2,
      perPage:4,
      totalPages: 50,
    }
}

La solution est ci-dessous

 let { parsedFilter } = this.state
 this.setState({
      parsedFilter: {
        ...this.state.parsedFilter,
        page: 5
      }
  });

ici mettre à jour la valeur de la "page" clé avec la valeur 5

Peut utiliser une syntaxe étendue, quelque chose comme ceci:

inputChangeHandler : function (event) {
    this.setState( { 
        ...this.state,
        [event.target.id]: event.target.value
    } );
},