更改選定的值dropdown reactjs

-1

我正在使用ReactJS的下拉框，我正在使用從「this.state.whoIsChecked.allowDestroyAll」中獲得的默認值。但是，當我將它用作默認值時，我無法再改變它的值。這裏如下我正在使用的代碼：更改選定的值dropdown reactjs

<select 
className="form-control" 
id="ada" 
value={this.state.whoIsChecked.allowDestroyAll}> 
    <option>true</option> 
    <option>false</option> 
</select>

來源

2017-06-06 Naback

這非常含糊。請嘗試提供更多的上下文。 –

這已在不同的主題上得到解答。請看看https://stackoverflow.com/questions/29108779/how-to-get-selected-value-of-a-dropdown-menu-in-reactjs –

可能的重複[如何獲取下拉菜單的選定值在ReactJS]（https://stackoverflow.com/questions/29108779/how-to-get-selected-value-of-a-dropdown-menu-in-reactjs） – GrumpyCrouton

您需要與controlled input爲了提供一個值選項字段像

handleChange(e) { 
    var whoIsChecked = {...this.state.whoIsChecked} 
    whoIsChecked.allowDestroyAll = e.target.value 
    this.setState({whoIsChecked}) 
} 


render() { 
return <select 
    className="form-control" 
    id="ada" 
    onChange={(e) => this.handleChange(e)} 
    value={this.state.whoIsChecked.allowDestroyAll}> 
     <option value="true">true</option> 
     <option value="false">false</option> 
    </select> 
}

後更改值添加 onChange事件和更新狀態

class App extends React.Component { 
 
state= { 
 
    whoIsChecked: { 
 
     allowDestroyAll: "true" 
 
    } 
 
} 
 
handleChange(e) { 
 
     var whoIsChecked = {...this.state.whoIsChecked} 
 
     whoIsChecked.allowDestroyAll = e.target.value 
 
     this.setState({whoIsChecked},()=> {console.log(this.state)}) 
 
      
 
    } 
 
    
 

 
    render() { 
 
    return <select 
 
     className="form-control" 
 
     id="ada" 
 
     onChange={(e) => this.handleChange(e)} 
 
     value={this.state.whoIsChecked.allowDestroyAll}> 
 
      <option value="true">true</option> 
 
      <option value="false">false</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"></div>

來源

2017-06-06 18:48:03

謝謝，夥計！幫助了我很多！ – Naback

考慮接受和upvoting的答案，如果它幫助 –

您正在使用controlled element，使用值屬性（MEA ns由state變量控制selectfield的值），則需要定義onchange方法來更新該值，否則selectfield將變爲只讀。

寫這樣的：

<select 
    className="form-control" 
    id="ada" 
    value={this.state.whoIsChecked.allowDestroyAll} 
    onChange={this.change} 
> 
    <option value='true'>true</option> 
    <option value='false'>false</option> 
</select> 

change = (e) => { 
    let whoIsChecked = Object.assign({}, this.state.whoIsChecked) 
    whoIsChecked.allowDestroyAll = e.target.value; 
    this.setState({whoIsChecked}); 
}

注：您需要分配的獨特價值，以每個option。

來源

2017-06-06 18:49:00

謝謝，人......這工作！ – Naback

很高興，它解決了你的問題:) –

更改選定的值dropdown reactjs

回答

相關問題