根据状态反应重置选择选项答案

【问题标题】：React reset select options when depending on the state根据状态反应重置选择选项
【发布时间】：2019-05-28 15:26:47
【问题描述】：

我有一个 Select 标签，允许用户在 2-7 人之间进行选择，我还有一个 onChange 事件，它将该数字保存到状态。之后，它将调用 updateMenuSelect 函数并渲染 x 数量的选择标签。问题是我希望 updateMenuSelect 中的每个选项都是 Meal #X，而不是之前选择的项目。

 updateMenuSelect() {
    const menuSelector = [];
    for (let i = 0; i < this.state.personCount; i++) {
      menuSelector.push(
        <div>
          <select onChange={this.addMeal} name={i}>
            <option value={0} selected>
              Meal #{i + 1}
            </option>
            <option value={15}>Cheesy Stuffed BBQ Pork Burgers</option>
            <option value={17}>Tex-Mex Cheese-Stuffed Burgers</option>
            <option value={20}>Fiesta Chicken Tacos</option>
            <option value={24}>Apricot Balsamic-Glazed Pork Tenderloin</option>
            <option value={15}>Lemon Pepper Chicken Linguine</option>
          </select>
        </div>
      );
    }

    return <div>{menuSelector}</div>;
  }

例如，假设我选择了 3 个人，然后它将呈现 3 个选择，每个选择具有相同的选项。如果对于所有 3 个，我选择“Fiesta Chicken Tacos”，然后我将人数更新为 6，它将呈现 6 个选择标签，但前 3 个仍然有“Fiesta Chicken Tacos”。我怎样才能使选项中的文本重置？我有一个有效的反应沙箱链接https://codesandbox.io/s/8z20mnkk38

【问题讨论】：

我会添加一个包装器组件，它发送一个回调，并在更改触发回调时，让包装器重新呈现所有选择

标签： javascript reactjs forms select

【解决方案1】：

问题是现有选项被重复使用。发生这种情况是因为您没有指定表示这些是新选择框的键。

最简单的方法是将key 添加到外部div，这取决于选择框的数量和每个选择的实际索引。

变化很大

menuSelector.push(
    <div>

到

menuSelector.push(
    <div key={`${i}-${this.state.personCount}`}>

将解决问题。

在https://codesandbox.io/s/q868qyrx16更新了演示

【讨论】：

【解决方案2】：

如果您将每个<select> 的选定选项放入状态，则可以在changedPersonCount 方法中将它们全部重置。

我已更新您的沙盒链接：https://codesandbox.io/s/6w54qj2y2z

解释我改变了什么

为状态添加了选定的选项：

this.state = {
  personCount: 0,
  selectedOptions: {}
};

实现了 addMeal 功能（随意修改它以包含您希望它在选择选项时也执行的任何功能）

addMeal = (index, value) => {
    this.setState(prevState => ({
      selectedOptions: { ...prevState.selectedOptions, [index]: value }
    }));
};

获取循环中每个<select>的选定值

...
for (let i = 0; i < this.state.personCount; i++) {
    const selectedValue = this.state.selectedOptions[i] || 0;
...

更改<select> 以使用来自状态的值，并在更改时使用参数调用 addMeal

<select
    onChange={e => {
      this.addMeal(i, e.target.value);
    }}
    name={i}
    value={selectedValue}
 >

从默认 <option> 中删除了 selected 属性

<option value={0}>Meal #{i + 1}</option>

【讨论】：