React: trigger onChange und update select Element, wenn der Eingabewert durch den Status

Question

geändert wird.

Ich möchte den Eingabewert entsprechend dem Status ändern. Der folgende Code löst die Methode handleChange() manuell aus. Dies funktioniert für ein Eingabefeld, aber ich kann nicht herausfinden, wie dies zu tun ist, um auch eine select Box zu aktualisieren.

Ich versuchte Folgendes, aber es hat nicht funktioniert.

ev = new Event("option", { bubbles: true }); 
el = ReactDOM.findDOMNode(node); 

ansehen Code unten:

class App extends React.Component { 

    constructor(props) { 
    super(props) 
    this.state = { 
     value: "random text", 
     country: "USA"  
    } 
    } 


    handleChange (node, value) { 

    if(typeof value === "object") { 

     this.setState({ 
      country: value.target.value 
     }); 

    } else { 
     this.setState({value: 'another random text'}) 
    } 

    var event = new Event('input', { bubbles: true }); 
    this.myinput.dispatchEvent(event); 
    } 

    render() { 
    return (
     <div> 
     <input value={this.state.value} onChange={(e) => {this.handleChange(e)}} ref={(input)=> this.myinput = input}/> 
     <select onChange={(e) => {this.handleChange(e)}} name="country"> 
      <option>USA</option> 
      <option>Mexico</option> 
     </select> 
     </div> 
    ) 
    } 
} 

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

Answer 1

Änderungen:

1. definieren eine name Eigenschaft gleiche wie Zustand Variablennamen mit den beiden Feldern, input und select.

2. Bind die Änderungsfunktion innerhalb Konstruktor:

this.handleChange = this.handleChange.bind(this); 

3. Verwenden [] die jeweilige Zustandsgröße in Änderungsfunktion und Zugriff zu aktualisieren, die von e.target.name Variablennamen angeben.

4. Sie verwenden das controlled input Element so ist ref hier nicht benötigt, können Sie input Elementwert zugreifen, indem this.state.value

prüfen die Arbeits Schnipsel:

class App extends React.Component { 
 

 
    constructor(props) { 
 
    super(props) 
 
    this.state = { 
 
     value: "random text", 
 
     country: "USA"  
 
    } 
 
    this.handleChange = this.handleChange.bind(this); 
 
    } 
 

 
    handleChange (e) { 
 
     this.setState({[e.target.name]: e.target.value}) 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <input name='value' value={this.state.value} onChange={this.handleChange}/> 
 
     <select name="country" value={this.state.country} onChange={this.handleChange} > 
 
      <option>USA</option> 
 
      <option>Mexico</option> 
 
     </select> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

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