React 表单选项中的值没有改变

Question

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

<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,
  });
}

注意-我正在尝试在 select

上发送一个 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
  });
}

React 表单选项中的值没有改变

Value Inside React Form Options not changing

forms

reactjs

react-forms