Reactjs setState () з ім'ям динамічного ключа?

EDIT: це дублікат, дивіться тут

Я не можу знайти прикладів використання динамічного імені ключа під час встановлення стану. Це те, що я хочу зробити:

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

де event.target.id використовується як стан стану, який потрібно оновити. Чи це неможливо в React?

Завдяки підказці @ Cory, я використав це:

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

    this.setState( stateObject );    
},

Якщо ви використовуєте ES6 або транспілер Babel для перетворення коду 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 });
}

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

Наприклад:

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

Як я це досяг ...

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

Я просто хотів додати, що ви також можете використовувати деструктуризацію для рефакторації коду та зробити його виглядом акуратніше.

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

У циклі з .mapтакою роботою:

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

Зверніть увагу на параметр []in type. Сподіваюся, це допомагає :)

У мене була подібна проблема.

Я хотів встановити стан, де зберігається ключ другого рівня у змінній.

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

Однак це невірний синтаксис.

Для цього я використав такий код:

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

З ES6 + ви можете просто [ ${variable}]

Я шукав досить просте рішення, і знайшов таке:

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

Сподіваюсь, це допомагає

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

Будь ласка, пам’ятайте про цитату.

Ваш стан зі словником оновить деякий ключ, не втрачаючи іншого значення

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

Рішення нижче

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

тут оновіть значення для ключової "сторінки" зі значенням 5

Можливо використовувати синтаксис розповсюдження приблизно так:

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