Reactjs setState() с динамическим именем ключа?

Question

EDIT: это дубликат, см. here

Я не могу найти примеры использования динамического имени ключа при настройке состояния. Это то, что я хочу сделать:

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

где event.target.id используется в качестве государственного ключа в обновлении. Разве это невозможно в реактиве?

Answer 1

Благодаря намек @ Кори, я использовал это:

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

    this.setState(stateObject);  
}, 

При использовании ES6 или Babel transpiler превратить ваш код JSX, вы можете сделать это с computed property names тоже:

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

Как Я достиг этого ...

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

Answer 3

Может использовать синтаксис распространения, что-то li ка это:

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

Answer 4

Если вам необходимо работать с несколькими контролируемых элементами ввода, вы можете добавить имя атрибут для каждого элемента, и пусть функция обработчика выбрать, что делать на основе стоимости event.target.name.

Например:

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