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

试图将数据绑定到状态与在React中映射的输入字段

1 个答案: