Javascript 删除下拉列表中的选择选项时，如何使字段返回到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});
   …
}

构造函数（道具）{
超级（道具）；
this.state={}；
此.state={
...
奖励：this.props.bucket.raward | |“”，
...
};
...
this.onBucketRewardChanged=this.onBucketRewardChanged.bind（this）；
...
}
render（）{
…
奖励

{this.getRewardErrorText（）}
这个.onBucketRequestChanged（bucketIdx，e）}>
请选择一个奖励。。。
{rewards.map（this.renderwardids）}
}
RenderWardID（奖励，idx）{
返回(
{raward.id}
);
}
onBucketRewardChanged（bucketIdx，事件）{
this.setState（{raward:event.target.value}）；
…
}

奖励下拉列表是使用用户在其他地方的输入动态构建的奖励数组，因此奖励列表中的选项将随时间而更改（添加或删除）。上面的代码只有一个例外。删除奖励选项时，先前选择该奖励选项的条目的行为与我所希望的不一样，奖励的显示将自动落在列表的顶部，但保存表单时，由于未实际选择该表单，因此未保存任何值

---

我希望在删除之前选择的奖励选项时，在奖励字段中显示默认值“请选择奖励”，这将有助于用户明确地重新选择奖励，但我无法确定如何实现这一点。我还是个新手，任何帮助都将不胜感激。

我正在尝试这样的方法：

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

取代

value={this.props.bucket.reward}

但这似乎不起作用。所有内容默认返回“请选择奖励…”