javascript - 当下拉列表中的选定选项（React 中的映射选择输入）不再存在时，如何实现更好的回退？

Question

我有一个名为“奖励”的下拉列表。下拉列表中的所有选项都是从其他地方的用户提交的信息中填充的，这意味着下拉列表的内容是动态的。

这是它的外观：

这是代码：

constructor(props) {
    super(props);
    this.state = {};
    this.state = {
       ...
       reward: this.props.bucket.reward || "",
       ...
    };

    ...
    this.onBucketRewardChanged = this.onBucketRewardChanged.bind(this);
    ...
}

render() {
…
<div className="col-md-2">
   <label>
      <span className={''}>Reward<br/></span>
   </label>
   <select className="form-control"
         value={this.state.reward}
         onChange={(e) => this.onBucketRewardChanged(bucketIdx, e)}>
      <option value="" disabled selected hidden>Please select a reward ...</option>
      {rewards.map(this.renderRewardIDs)}
   </select>
</div>
}

renderRewardIDs(reward, idx) {
   return (
      <option key={idx} value={reward.id}>{reward.id}</option>
   );
}

onBucketRewardChanged(bucketIdx, event) {
   this.setState({reward: event.target.value});
   …
}

奖励下拉列表是一组奖励，这些奖励是使用其他地方的用户输入动态构建的，因此可以不时更改（添加或删除）奖励列表中的选项。上面的代码有效，除非先前选择的值不再存在。删除奖励选项后，在之前选择了该奖励选项的条目中，我想回退到默认值，即“”并显示“请选择奖励...”。但是，在我当前的实现（上图）中，显示了下拉列表中的第一个值（就像它被选中一样），但是当保存表单时，什么都没有保存，因为它实际上并没有被选中。

我希望在删除先前选择的选项时显示在奖励字段中的默认值“请选择奖励”，这有望提醒用户明确地重新选择一个，但我不知道如何做到这一点。我还是 React 的新手，任何帮助将不胜感激。

标签： javascriptreactjsselect