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

Question

РЕДАКТИРОВАТЬ: это дубликат, смотрите здесь

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

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

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

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 для преобразования вашего кода 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 });
}

Answer 2

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

Например:

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

Answer 3

Как мне это удалось...

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

Answer 4

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

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

Answer 5

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

Обратите внимание на характер цитаты.

Answer 6

У меня была аналогичная проблема.

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

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

Однако это недопустимый синтаксис.

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

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

Answer 7

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

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

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

Answer 8

Я искал красивое и простое решение и нашел вот что:

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

Надеюсь это поможет

Answer 9

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

Answer 10

Когда данный элемент является объектом:

handleNewObj = e => {
        const data = e[Object.keys(e)[0]];
        this.setState({
            anykeyofyourstate: {
                ...this.state.anykeyofyourstate,
                [Object.keys(e)[0]]: data
            }
        });
    };

надеюсь, это поможет кому-то

Answer 11

Ваше состояние со словарем обновляет один ключ без потери другого значения

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

Решение ниже

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

здесь обновите значение для ключа "page" со значением 5

Answer 12

Если вы используете JS ES6+, это[${variable}], чтобы установить ключ:

      // In React
onChange={e => setData({ [variable] : e.target.value })}

Кроме того, если вы хотите получить доступ к динамическому ключу, вы просто используетеdata[${variable}]:

      // In React
value={data[variable]}

Answer 13

попробуйте этот пожалуйста.

Государство здесь в качестве примера

       this.state = {
            name: '',
            surname: '',
            username: '',
            email: '',
  }

Функция Onchange здесь.

      onChangeData = (type, event) => {
    const stateData = this.state;
    if (event === "" || event === "Seçiniz")
        stateData[type] = undefined
    else
        stateData[type] = event

    this.setState({ stateData});
}

Answer 14

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

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