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。使用name和input字段定义与状态变量名称相同的select属性。

2. 在构造函数中绑定更改函数：

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

3. 使用[]更新更改功能中的特定状态变量，并按e.target.name访问该状态变量名称。

4. 您使用的是controlled input元素，因此此处不需要ref，您可以input <访问this.state.value元素值< / p>

检查工作代码段：

＆＃13;

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

＆＃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;

React：触发onChange并更新select元素，如果输入值由状态

1 个答案: