如何检查反应js中的选定选项

Question

我正在尝试使用 react js 在我的选择框中添加选定的选项。 这是我的代码

<Field component='select' name='sample'>
  <option value={1}>option1</option>
  <option value={2}>option2</option>
  <option value={3} {... "selected"}>option3</option>
  <option value={4}>option4</option>
  <option value={5}>option5</option>
</Field>

我已经尝试了 defaultValue 并添加了selected但它不起作用。 我错过了我的代码吗？

Answer 1

您可以简单地使用类似这样的东西。选择值在 select(value property) 中的地方反应就是这样工作的...

<select value={yourSelectedStateValue}>
        <option value={1}>option1</option>
        <option value={2}>option2</option>
        <option value={3}>option3</option>
        <option value={4}>option4</option>
        <option value={5}>option5</option>                            
 </select>

看看这里的链接

处理 statevalue，使用 onChange() 事件...

<select value={yourSelectedStateValue} onChange={this.handleSelectOption.bind(this)}>
        <option value={1}>option1</option>
        <option value={2}>option2</option>
        <option value={3}>option3</option>
        <option value={4}>option4</option>
        <option value={5}>option5</option>                            
 </select>


handleSelectOption(e){
   this.setState({
      yourSelectedStateValue: e.target.value,
   })
}

Answer 2

我的解决方案示例是

<Form.Select id='oCompId'>
<option  value="-1">--Please select once item--</option>
{ items.map(item => {
   return item.id === targetId ?
          (<option value={item.id} selected>{item.name}</option>) 
         :
         (<option value={item.id} >{item.name}</option>) 
   }
)}
</Form.Select>

我在首次呈现时向用户显示默认选择。