React：入力値が状態によって変更された場合、onChangeをトリガして選択要素を更新します。

Question

状態に応じて入力値を変更します。以下のコードは、handleChange()メソッドを手動でトリガーします。これは入力ボックスで機能しますが、selectボックスを更新するにはこれを行う方法を理解できません。

私は以下を試みましたが、うまくいかなかった。

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

以下の完全なコードを参照してください：

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

変更：

1.フィールド、inputとselectの両方で状態変数名と同じnameプロパティを定義します。

2.バインドコンストラクタの内部チェンジ機能：

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

3.使用[]変更機能で特定の状態変数を更新し、e.target.nameによってその状態変数名にアクセスします。あなたはcontrolled input要素を使用している

4.のでrefが、ここで必要とされていない、あなたが作業スニペットチェックthis.state.value

によってinput要素の値にアクセスすることができます。

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

を