Reactjs setState () con un nome chiave dinamico?

EDIT: questo è un duplicato, vedi qui

Non riesco a trovare alcun esempio di utilizzo di un nome chiave dinamico quando si imposta lo stato. Questo è quello che voglio fare:

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

dove event.target.id viene utilizzato come chiave di stato da aggiornare. Questo non è possibile in React?

Grazie al suggerimento di @ Cory, ho usato questo:

inputChangeHandler : function (event) {
    var stateObject = function() {
      returnObj = {};
      returnObj[this.target.id] = this.target.value;
         return returnObj;
    }.bind(event)();

    this.setState( stateObject );    
},

Se usi ES6 o il transpiler Babel per trasformare il tuo codice JSX, puoi farlo anche con nomi di proprietà calcolati :

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 });
}

Quando è necessario gestire più elementi di input controllati, è possibile aggiungere un attributo name a ciascun elemento e lasciare che la funzione handler scelga cosa fare in base al valore di event.target.name.

Per esempio:

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

Come ho realizzato questo ...

inputChangeHandler: function(event) {
  var key = event.target.id
  var val = event.target.value
  var obj  = {}
  obj[key] = val
  this.setState(obj)
},

Volevo solo aggiungere che puoi anche usare la destrutturazione per riformattare il codice e renderlo più ordinato.

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

In loop con .maplavoro come questo:

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

Si noti la []di typeparametro. Spero che questo ti aiuti :)

Ho avuto un problema simile.

Volevo impostare lo stato in cui era memorizzata la chiave di 2 ° livello in una variabile.

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

Tuttavia questa non è sintassi valida.

Ho usato il seguente codice per raggiungere questo obiettivo:

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

Con ES6 + puoi semplicemente fare [ ${variable}]

Stavo cercando una soluzione carina e semplice e ho trovato questo:

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

Spero che questo ti aiuti

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

Si prega di tenere presente il carattere di citazione.

Il tuo stato con dizionario aggiorna alcune chiavi senza perdere altro valore

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

La soluzione è sotto

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

qui aggiorna il valore per la chiave "pagina" con il valore 5

Può usare una sintassi diffusa, qualcosa del genere:

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