是否可以從在reactjs中動態創建的輸入欄位中獲取多個輸入？

我正在創建一個帶有表單的網頁，其中我將根據從后端獲得的值動態創建一個輸入欄位。我已經創建了輸入欄位，但是當我單擊添加按鈕時，我不知道如何從每個欄位中檢索資料并將它們發送到后端，我知道我可以使用靜態的目標 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>
    );
  }
}

這是我的輸出

uj5u.com熱心網友回復：

試試這個，我已經更新了你的代碼

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

標籤：

上一篇：如何根據從第一次獲得的值進行第二次API呼叫。使用React和useEffect鉤子

下一篇：在React的映射中結合陣列和字串