Javascript 如何在Reactjs中创建动态字段

我是React的新手。我有一个场景，比如有一个包含四个选项的select语句。根据用户从下拉列表中选择的选项，我需要在一行中创建一个动态输入字段，并将其附加到包装器元素。 我正在创建的动态字段对于四个选项中的每一个都是不同的。用户可以添加输入字段，也可以删除输入字段，如您在此处看到的

---

但是在上面，我们可以添加和删除相同类型的输入字段。在我的情况下，动态字段将基于所选的选项。因此，那里的专家请指导我如何在Reactjs中实现此功能。总之，这可以通过在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>
    )
  }
}

类表单扩展组件{
构造函数（）{
超级（）
此.state={
选项：[]
}
}
添加操作（e）{
const selectedValue=this.refs.selection.value
const currentOptions=this.state.options
currentOptions.push（选择的值）；
//每次更改时，将选定值附加到状态的选项数组
this.setState（{options:currentOptions}）
}
renderRows（）{
//在这里，您将定义每种类型的行
this.state.options.map（（选项，索引）=>{
如果（选项==“添加”）{
返回(
调整价格（添加）
添加
到
选择1
选择2
选择3
去除
)
}否则如果（选项==“乘法”）{
返回(
调整价格（乘）
倍增
到
选择1
选择2
选择3
去除
)
}否则如果（选项==“等于”）{
//在此处返回另一行
}否则如果（选项==“不等于”）{
//在此处返回另一行
}
})
}
渲染（）{
返回(
{renderRows.bind（this）}
调整价格（添加）
调整价格（乘）
过滤产品（等于）
过滤产品（不等于）
添加操作
)
}
}

本质上，这里发生的事情是，我们在组件状态上存储一个选项数组，最初为空。现在，当用户选择某个内容并添加一个操作时，它将被添加到状态数组中。在renderRows函数中，您有一个if/if-else链来决定返回哪种行，也可以使用开关块

---

因此，现在当用户在下拉列表中选择某个内容并单击“添加操作”时，会立即追加一个新的输入字段。

总之，这可以通过在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>
    )
  }
}

类表单扩展组件{
构造函数（）{
超级（）
此.state={
选项：[]
}
}
添加操作（e）{
const selectedValue=this.refs.selection.value
const currentOptions=this.state.options
currentOptions.push（选择的值）；
//每次更改时，将选定值附加到状态的选项数组
this.setState（{options:currentOptions}）
}
renderRows（）{
//在这里，您将定义每种类型的行
this.state.options.map（（选项，索引）=>{
如果（选项==“添加”）{
返回(
调整价格（添加）
添加
到
选择1
选择2
选择3
去除
)
}否则如果（选项==“乘法”）{
返回(
调整价格（乘）
倍增
到
选择1
选择2
选择3
去除
)
}否则如果（选项==“等于”）{
//在此处返回另一行
}否则如果（选项==“不等于”）{
//在此处返回另一行
}
})
}
渲染（）{
返回(
{renderRows.bind（this）}
调整价格（添加）
调整价格（乘）
过滤产品（等于）
过滤产品（不等于）
添加操作
)
}
}

本质上，这里发生的事情是，我们在组件状态上存储一个选项数组，最初为空。现在，当用户选择某个内容并添加一个操作时，它将被添加到状态数组中。在renderRows函数中，您有一个if/if-else链来决定返回哪种行，也可以使用开关块

---

因此，现在当用户在下拉列表中选择某个内容并单击“添加操作”时，会立即添加一个新的输入字段。

非常感谢您的建议。但我有一个问题，我要添加一行输入字段，因为您可以看到图像，而不仅仅是一个输入字段。如果您指导我如何实现这一点，这将是一个非常相似的实现方式，每个选项都有一个“价值”属性。将其分配给相应的值，如“not equals”、“equal”、“multiply”或“add”，在映射函数中，可以有一系列if语句或返回d的switch语句