如何创建动态更新选项列表的 React 下拉表单？

Question

我想在React中创建两个下拉选项形式，选项为数字0-6，但两个选项之和不能超过6。因此，如果第一个下拉选择5框，第二个下拉列表将只显示选项 0 和 1 以供选择。我该怎么做？

Answer 1

您可以将每个选择保存在状态中，并根据其他输入中已选择的内容呈现可用数字列表。

构造函数中的状态可能类似于：

this.state = {selectionA: 0, selectionB: 0, availableSelections: [0,1,2,3,4,5,6]};

每当做出选择时，在事件处理程序中使用 setState 设置相应的 selectionA 或 selectionB。有关反应文档中的示例，请参阅下面的 link。

在渲染函数中，使用过滤函数制作可用数字列表：

const {selectionA, selectionB, availableSelections} = this.state;
const optionsA = availableSelections.filter((num) => (selectionB + num) < 6);
const optionsB = availableSelections.filter((num) => (selectionA + num) < 6);

假设您正在使用此处描述的 select tag：https://reactjs.org/docs/forms.html#the-select-tag，使用地图

显示选项

<label>
  Pick your first number:
  <select value={selectionA} onChange={this.handleChangeA}>
    {optionsA.map((num) => (
      <option value={num}>{num}</option>
    )}
  </select>
</label>
... then the same for selectionB

注意，我还没有测试过这个。您可能运行遇到有关状态为数字类型的问题，而表单需要字符串类型的东西，因此您可能必须使用 parseInt 和 toString 进行一些转换。我希望这有助于您入门！

这是一个基于 React link:

中的 FlavorForm 示例的完整工作示例

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {selectionA: 0, selectionB: 0, availableSelections: [0,1,2,3,4,5,6]};

    this.handleChangeA = this.handleChangeA.bind(this);
    this.handleChangeB = this.handleChangeB.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChangeA(event) {
    this.setState({selectionA: parseInt(event.target.value)});
  }

  handleChangeB(event) {
    this.setState({selectionB: parseInt(event.target.value)});
  }

  handleSubmit(event) {
    alert('Your Sum is: ' + (parseInt(this.state.selectionA) + parseInt(this.state.selectionB)));
    event.preventDefault();
  }

  render() {
    const {selectionA, selectionB, availableSelections} = this.state;
    const optionsA = availableSelections.filter((num) => (parseInt(selectionB) + num) <= 6);
    const optionsB = availableSelections.filter((num) => (parseInt(selectionA) + num) <= 6);

    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your first number:
          <select value={selectionA.toString()} onChange={this.handleChangeA}>
            {optionsA.map((num) => (
               <option key={num} value={num.toString()}>{num}</option>
            ))}
          </select>
        </label>
        <label>
          Pick your second number:
          <select value={selectionB.toString()} onChange={this.handleChangeB}>
            {optionsB.map((num) => (
               <option key={num} value={num.toString()}>{num}</option>
            ))}
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <FlavorForm />,
  document.getElementById('root')
);

选择一个数字时，将设置为选择或选择b的状态。这将强制重新渲染，这将根据新状态更新过滤的 optionsA 和 optionsB。

如何创建动态更新选项列表的 React 下拉表单？

How do I create React drop down forms that dynamically updates the list of options?

forms

drop-down-menu

reactjs