如何檢查反應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>

我在首次呈現時向用戶顯示默認選擇。