三元添加選定的屬性選項

Question

我使用下面的代碼添加選定一個選項：

<select name="hourSelect" ref="hourSelect"> 
      {hourSelect.map((option) => (
        <option value={option.value} {(selectedHour == option.value) ? 'selected' : ''}>{option.label} </option> 
      ))} 
     </select> 

我得到的語法錯誤： 語法錯誤：C：/網站/ CalendarRedux/src目錄/components/modals/AddAchievementModal.js：意外的原因，預期...（94:52）

92 |    <select name="hourSelect" ref="hourSelect"> 
    93 |    {hourSelect.map((option) => (
> 94 |      <option value={option.value} {(selectedHour == option.value) ? 'selected' : ''}>{option.label} </option> 
    |             ^
    95 |    ))} 
    96 |    </select> 

Answer 1

您跳過屬性名稱或已指定了多個值試試這個：

<select name="hourSelect" ref="hourSelect"> 
    {hourSelect.map((option) => (
    <option value={option.value} selected={ 
     (selectedHour == option.value) ? 'selected' : '' 
     } 
     >{option.label} </option> 
    ))} 
    </select> 

Answer 2

您錯過了屬性值前的selected=。

<select name="hourSelect" ref="hourSelect"> 
    {hourSelect.map((option) => (
     <option value={option.value} selected={(selectedHour == option.value) ? 'selected' : ''}>{option.label} </option> 
    ))} 
</select> 

（作爲一個方面說明，如果selected期待一個boolean值，你可以將其更改爲selected={selectedHour == option.value}）

Answer 3

賦值true或false來selected財產（無緣屬性名），如這樣的：

<option value={option.value} selected = {selectedHour == option.value ? true : false}>{option.label} </option> 

我會建議您使用的select值屬性設置爲使用controlled component和state變量保持該值。

檢查工作片段：

class App extends React.Component { 
 

 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
     }; 
 
    } 
 

 
    render(){ 
 
     return(
 
      <select onChange={e => {}}> 
 
       <option value='1' disabled>Select</option> 
 
       { 
 
        [2,3,4].map((i,j)=>{ 
 
         return <option selected={i == 2 ? true : false} key={i} value={i}>{i}</option> 
 
        }) 
 
       } 
 
      </select> 
 
     ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'/>

Answer 4

對我來說，這就像

selected={(city.city_id == person.city_id) ? 'selected' : ''}