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

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

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

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

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

Ответ 1

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

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, вы можете выполнить это с помощью вычисленные имена свойств:

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

Ответ 2

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

Например:

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

Ответ 3

Как я это сделал...

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

Ответ 4

Просто хотел добавить, что вы можете также де-структурировать, чтобы реорганизовать код и сделать его более аккуратным.

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

Ответ 5

В цикле с .map работать так:

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

Обратите внимание на [] в параметре type. Надеюсь это поможет :)

Ответ 6

С ES6+ вы можете просто сделать [ ${variable} ]

Ответ 7

У меня была похожая проблема.

Я хотел установить состояние хранения ключа 2-го уровня в переменной.

например this.setState({permissions[perm.code]: e.target.checked})

Однако это неверный синтаксис.

Для этого я использовал следующий код:

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

Ответ 8

inputChangeHandler = (event) => {
    const stateObject = {};
    stateObject[event.target.id] = event.target.value;
    this.setState(stateObject);
};

Ответ 9

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

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