Reactjs setState() con un nome chiave dinamico?

Question

EDIT: questo è un duplicato, vedere here

non riesco a trovare alcun esempio di utilizzo di un nome di chiave dinamica durante l'impostazione dello 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. Non è possibile in React?

Answer 1

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 si utilizza ES6 o Babel transpiler di trasformare il codice JSX, è possibile eseguire questa con computed property names, troppo:

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

Answer 2

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

Answer 3

Può utilizzare una sintassi di diffusione, qualcosa li ke questo:

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

Answer 4

Quando è necessario gestire più elementi di input controllati, è possibile aggiungere un attributo name per ogni elemento e lasciare che la funzione del gestore scegliere cosa fare in base al valore di event.target.name.

Ad esempio:

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