reactjs - React 表单选项中的值不变

Question

选择时选项下拉列表中的值不会改变。默认情况下，它总是发送第一个选项

<Form.Control required 
  as="select"                                       
  name="servicetype"                                                                    
  multiple={false}                                    
  value={this.state.servicetype}                                    
  onChange={this.serviceTypeChange}
  className={"bg-dark-text-white"}                                     
>


  {this.state.servicetype.map((servicetype, index) => (                                        
    <option key={index} value={servicetype}>{servicetype.type}</option>                                            
  ))}

</Form.Control>

我的 onchange 方法

serviceTypeChange = event => {
  this.setState({
    //[event.target.name]: [event.target.value]
    servicetype: this.state.servicetype,
  });
}

注意-我正在尝试在选择时发送一个 json 对象

Answer 1

在serviceTypeChange中，您正在使用相同的值更新状态，而不是从事件接收到的新值（您已将其注释掉）。尝试这个：

serviceTypeChange = event => {
  this.setState({
     ...this.state,
     servicetype: event.target.value,
  });
}

Answer 2

当您使用相同的状态变量来保存选项和选定选项时。为选定的选项使用另一个变量。

state = {
  serviceTypeOptions: [], // for available options
  selectedServiceType: null, // for selected option
}

更改处理程序中的更新

serviceTypeChange = event => {
  this.setState({
     selectedServiceType: event.target.value
  });
}