如何在Reactjs中創建動態字段

Question

我是React的新手，我的場景是有一個帶四個選項的select語句。基於用戶從下拉列表中選擇一個選項，我需要在一行中創建一個動態輸入字段並將其附加到包裝元素中。 我創建的動態字段在這四個選項中都會有所不同。用戶可以添加輸入字段，也可以刪除輸入字段，如下所示： http://formvalidation.io/examples/adding-dynamic-field /

但是在上面我們可以添加和添加刪除相同類型的輸入字段。在我的情況下，動態字段將基於所選的選項。所以那里的專家指導我如何在Reactjs中實現此功能

Answer 1

總之，這可以通過在select元素上觸發onchange事件來實現。 尚不清楚您要做什么，但我認為這與這種情況類似

class Form extends Component {
  constructor() {
    super()
    this.state = {
      options: []
    }
  }

  addOperation(e) {
    const selectedValue = this.refs.selection.value
    const currentOptions = this.state.options
    currentOptions.push(selectedValue);

    // append selected value to the state's options array on every change
    this.setState({ options: currentOptions })
  }

  renderRows() {
    // this is where you'll define each type of row
    this.state.options.map((option, index) => {
      if (option === "add") {
        return (
          <tr class="form-row" key={index}>
            <td>Adjust Price (Add)</td>
            <td>
              <label>
                Add
                <input type="text" placeholder={option} />
              </label>
                to
              <select>
                <option value="option1">option1</option>
                <option value="option2">option2</option>
                <option value="option3">option3</option>
              </select>
            </td>
            <td>
              <button>Remove</button>
            </td>
          </tr>
        )
      } else if (option === "multiply") {
        return (
          <tr class="form-row" key={index}>
            <td>Adjust Price (Multiply)</td>
            <td>
              <label>
                Multiply
                <input type="text" placeholder={option} />
              </label>
                to
              <select>
                <option value="option1">option1</option>
                <option value="option2">option2</option>
                <option value="option3">option3</option>
              </select>
            </td>
            <td>
              <button>Remove</button>
            </td>
          </tr>
        )
      } else if (option === "equals") {
        // return a different row here
      } else if (option === "not equals") {
        // return a different row here
      }
    })
  }

  render () {
    return (
      <form>
        <div className="appended-inputs">
          {renderRows.bind(this)}
        </div>
        <select name="select" id="select" ref="selection">
          <option value="add">Adjust Price (Add)</option>
          <option value="multiply">Adjust Price (Multiply)</option>
          <option value="equals">Filter Products (equals)</option>
          <option value="not equals">Filter Products (not equals)</option>
        </select>
        <button onClick={addOperation.bind(this)}>Add Operation</button>
      </form>
    )
  }
}

本質上，這里發生的是我們在組件狀態上存儲了一組選項，最初是空的。 現在，當用戶選擇某項並添加一個操作時，它將添加到狀態數組中。 在renderRows函數中，您具有一個if / if else鏈來決定要返回哪種行，或者可以使用switch塊。

因此，現在用戶在下拉菜單中選擇某些內容並單擊添加操作時，將立即附加一個新的輸入字段。