Блог

У меня есть выпадающий список выбора, я хочу установить значение по умолчанию, чтобы оно было удобным для пользователя. Но что произойдет, если пользователь не изменит выбор на что-то другое, я не получу фактическое значение. Должно быть, я сделал что-то не так, но что именно?

Вот мой код: в конструкторе

 constructor(props) {
   super(props);
   this.state = {};
   this.state = {
      …
      reward: this.props.milestone.reward || "",
      …
   };
this.onMilestoneRewardChanged = this.onMilestoneRewardChanged.bind(this);


render(){
<td className="input-group-sm col-sm-1">
   <select className="form-control"
         defaultValue={combinedRewards[0]}
         value={this.state.reward}
         onChange={(e) => this.onRewardChanged(milestoneIdx, e)}>
      {combinedRewards.map(this.renderRewardIDs)}
   </select>
</td>
}

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

onRewardChanged(Idx, event){
   this.setState({reward: event.target.value});
   …
}
  

таким образом, первый элемент в списке отображается как значение по умолчанию, но если пользователь думает, что оно уже выбрано, и не меняет его на что-то другое, поле вознаграждения в сохраненных данных остается пустым. Почему?

Я считаю, что это происходит из-за вашего начального состояния reward: this.props.milestone.reward || "" .

Когда вы сохраняете его, значение if this.props.milestone.reward не определено, чем значение будет "" , если взаимодействие с пользователем не происходило.

Также неясно, что это за значение combinedRewards[0] . Если вы установите значение defaultValue combinedRewards[0] равным, вам, вероятно, следует установить начальное состояние на то же самое.

Может быть, что-то вроде этого?

 constructor(props) {
   super(props);
   this.state = {};
   this.state = {
      …
      reward: this.props.milestone.reward || combinedRewards[0], // updated
      …
   };
this.onMilestoneRewardChanged = this.onMilestoneRewardChanged.bind(this);


render(){
<td className="input-group-sm col-sm-1">
   <select className="form-control"
         defaultValue={this.state.reward} // updated
         value={this.state.reward}
         onChange={(e) => this.onRewardChanged(milestoneIdx, e)}>
      {combinedRewards.map(this.renderRewardIDs)}
   </select>
</td>
}