是否可以从在 react js 中动态创建的输入字段中获取多个输入？

Question

我正在创建一个带有表单的网页，其中我将根据从后端获得的值动态创建一个输入字段。我已经创建了输入字段，但是当我单击添加按钮时，我不知道如何从每个字段中检索数据并将它们发送到后端，我知道我可以使用静态的目标 ID 获取输入，但是在这种形式下，每个 id 都是动态的。有没有什么概念可以获取输入！

这是我生成动态输入字段的代码。

    class UserInput extends React.Component {
  render() {
    const repinput = (event) => {
      this.setState({
        [event.target.id]: event.target.value,
      });
      console.log({ [event.target.id]: event.target.value });
    };

    return (
      <div className="cell">
        <div className="callout">
          {this.props.example.map((item, i) => (
            <div key={i}>
              <div className="grid-x">
                <div className="cell medium-2">
                  <div className="grid-x">
                    <div className="cell large-12">
                      <label className="labelalignment">
                        <h3> {item.BECname} : </h3>
                      </label>
                    </div>
                  </div>
                </div>

                <div className="cell medium-6">
                  <div className="grid-x">
                    <div className="cell large-12">
                      <label>
                        <input
                          type="text"
                          id={item.BECid}
                          placeholder="10.2"
                          onChange={repinput}
                          required
                        />
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}

          <div className="cell medium-12">
            <div className="grid-x">
              <div className="cell large-6">
                <div className=" flex-box">
                  <input className="styled" type="button" value="Add Data" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

这是我的输出

Answer 1

试试这个，我已经更新了你的代码

class UserInput extends React.Component {
  repinput = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

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

  render() {
    return (
      <div className="cell">
        <div className="callout">
          {this.props.example.map((item, i) => (
            <div key={i}>
              <div className="grid-x">
                <div className="cell medium-2">
                  <div className="grid-x">
                    <div className="cell large-12">
                      <label className="labelalignment">
                        <h3> {item.BECname} : </h3>
                      </label>
                    </div>
                  </div>
                </div>

                <div className="cell medium-6">
                  <div className="grid-x">
                    <div className="cell large-12">
                      <label>
                        <input
                          type="text"
                          id={item.BECid}
                          placeholder="10.2"
                          onChange={this.repinput}
                          name={item.BECname}
                          required
                        />
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}

          <div className="cell medium-12">
            <div className="grid-x">
              <div className="cell large-6">
                <div className=" flex-box">
                  <input
                    className="styled"
                    type="button"
                    value="Add Data"
                    onClick={this.onSubmit}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}