Попытка привязать данные к состоянию с помощью поля ввода, которое отображается в React

Question

Я пытаюсь привязать свои значения состояния к входным значениям с помощью функции onChange

  handleChange = event => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

но мои поля ввода находятся внутри карты, и я не знаю, как назначить полю ввода конкретное имя и атрибут значения для каждой итерации, чтобы функция onChange работала

Текущий код:

state = {
    row0: "",
    row1: "",
    row2: "",
    row3: "",
    row4: ""
  };

  handleChange = event => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

  handleSubmit = event => {
    console.log(this.state);
  };

  render() {
    const {
      row,
      editMode,
      index,
      selectedIdx,
      startEditing,
      stopEditing
    } = this.props;
    const rowLen = row.length;

    return (
      <React.Fragment>
        {row.map((eachRow, i) => {
          if (rowLen === i + 1) {
            return (
              <React.Fragment key={i}>
                {editMode === true && index === selectedIdx ? (
                  <TableCell align="right">
                    <Input className="input_key" name={`row${i}`} />
                    <IconButton
                      onClick={this.handleSubmit}
                      className="ml-4"
                      aria-label="Filter list"
                    >
                      <i className="fas fa-check" />
                    </IconButton>
                  </TableCell>
                ) : (
                  <TableCell key={i} align="right">
                    {eachRow}
                    <IconButton
                      onClick={startEditing}
                      className="ml-4"
                      aria-label="Filter list"
                    >
                      <i className="fas fa-pen" />
                    </IconButton>
                  </TableCell>
                )}
              </React.Fragment>
            );
          } else {
            return (
              <React.Fragment key={i}>
                {editMode === true && index === selectedIdx ? (
                  <TableCell>
                    <Input className="input_key" />
                  </TableCell>
                ) : (
                  <TableCell> {eachRow} </TableCell>
                )}
              </React.Fragment>
            );
          }
        })}
      </React.Fragment>
    );
  }
}

Я попытался использовать литерал шаблона для возможного сохранения входных значений в состоянии, но получил возвращенную ошибку, но я считаю, что это не работает, так как состояние является объектом, и я пытаюсь добавить строку к объекту.

<Input
className="input_key"
name={`row${i}`}
value={this.state + `${i}`}
onChange={this.handleChange}
/>

поэтому попытался создать функцию, отфильтровывающую ключ в соответствии с ним, но я не думаю, что это правильно.

  const daState = Object.keys(this.state).filter(state => {
        return state === `row${i}`;
      }); 

Мне нужно выяснить, как получить [event.target.name]: event.target.value, чтобы данные связывались с состоянием, может быть, есть другой подход к привязке значений к состоянию, что-нибудь поможет, спасибо .

Также будет приветствоваться любая дополнительная заметка по улучшению синтаксиса.

Answer 1

Hi,



Have a look here

https://stackoverflow.com/questions/29280445/reactjs-setstate-with-a-dynamic-key-name


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