当删除属于下拉列表的选择选项时，如何使该字段退回到ReactJS中的默认值？

如何解决当删除属于下拉列表的选择选项时，如何使该字段退回到ReactJS中的默认值？

我有一个名为“奖励”的下拉列表。它是根据上一页用户提交的信息填充的。

这是

的样子

代码如下：

    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>
      <span className="text-danger">{this.getRewardErrorText()}</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的新手，将不胜感激。

解决方法

我正在尝试这样的事情：

value={rewards.find(obj=>(this.props.bucket.reward===obj.value))}

替换

value={this.props.bucket.reward}

但这似乎不起作用。一切默认返回到“请选择奖励...”