Question

我有一个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”。我如何才能使选项中的文本重设？我有一个有效的React Sandbox链接https://codesandbox.io/s/8z20mnkk38

Answer 1

如果将每个<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}
 >

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

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

Answer 2

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

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

正在改变

menuSelector.push(
    <div>

到

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

将解决问题。

https://codesandbox.io/s/q868qyrx16上的演示已更新

根据状态做出反应重置选择选项

2 个答案:

我所做的更改的说明