Question

我使用以下代码将所选内容添加到选项中：

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

我收到语法错误：语法错误：C：/sites/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

将值true或false分配给selected属性（错过属性名称），如下所示：

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

我建议您使用select的值属性controlled component，并使用state变量维护该值。

检查工作代码段：

＆＃13;

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'))

＆＃13;

<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'/>

＆＃13;

Answer 2

您跳过属性名称或指定了多个值，请尝试以下操作：

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

Answer 3

您在属性值之前错过了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 4

就我而言，就像那样

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

Answer 5

第一个选项将显示您之前选择的选项。

循环选项将显示所有列表并隐藏所选选项。

<select name="city" value={this.state.city} onChange={this.handleChange}>
    <option value={this.state.getUserData?.user_data?.city?.id}> 
       {this.state.getUserData?.user_data?.city?.value}</option>
         {this.state.city_list.map(rolls1 => {
            return ( <option style={{display:this.state.getUserData?.user_data?.city?.id == rolls1.id ? 'none' : ''}} key={rolls1.id} value={rolls1.id}>{rolls1.name}</option>
            )}  
       )};
 </select>

jsx中的三元组将选定的属性添加到选项中

5 个答案: