ausgewählter Wert DropDown reactjs

Question

Ich verwende eine Dropdown-Box mit ReactJS und ich verwende die Standardwerte, die ich von "this.state.whoIsChecked.allowDestroyAll" bekomme. Aber wenn ich es als Standardwert verwende, kann ich den Wert nicht mehr ändern. Hier folgt der Code Ich verwende:

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

Answer 1

Sie benötigen ein onChange Ereignis mit dem controlled input und aktualisieren den Zustand zu geben, um den Wert zu ändern, nachdem ein Wert Optionsfeld bietet wie

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> 
} 

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>

Answer 2

Sie verwenden den controlled element die value-Eigenschaft mit (mea ns den Wert von selectfield durch die Variable state), müssen Sie die onchange Methode zu aktualisieren, dass state Wert selectfield wird schreibgeschützt werden.

schreiben es so:

<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}); 
} 

Hinweis: Sie müssen den eindeutigen Wert für jeden option zuzuweisen.