是否可以从在 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>
    );
  }
}

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

is it possible to get multiple input from the input field which is created dynamically in react js?

forms

json

reactjs

react-web

react-hooks