反应表单选项中的值不变

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>

我的更改方法

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

注意 - 我正在尝试在选择

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