尝试使用在 React 中映射的输入字段将数据绑定到状态答案

【问题标题】：Trying to bind data to state with input field that's being mapped in React尝试使用在 React 中映射的输入字段将数据绑定到状态
【发布时间】：2019-07-28 23:05:38
【问题描述】：

我正在尝试使用 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 以便数据绑定到状态也许有不同的方法将值绑定到状态任何东西都会有所帮助，谢谢.

也将不胜感激任何关于改进语法的旁注

【问题讨论】：

标签： javascript arrays reactjs loops object

【解决方案1】：

看这里

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

【讨论】：