javascript - react : trigger onChange if input value is changing by state?

编辑:我不想仅在单击按钮后才调用handleChange。它与handleClick无关。我在@shubhakhatri答案的评论中举了一个例子。

我想根据状态更改输入值，该值正在更改，但不会触发handleChange()方法。如何触发handleChange()方法？

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    value: 'random text'
    }
  }
  handleChange (e) {
    console.log('handle change called')
  }
  handleClick () {
    this.setState({value: 'another random text'})
  }
  render () {
    return (
      <div>
        <input value={this.state.value} onChange={this.handleChange}/>
        <button onClick={this.handleClick.bind(this)}>Change Input</button>
      </div>
    )
  }
}

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

这是codepen链接:http://codepen.io/madhurgarg71/pen/qrbLjp

最佳答案

您需要手动触发onChange事件。在文本输入上，onChange侦听input事件。

因此，在handleClick函数中，您需要触发类似

handleClick () {
    this.setState({value: 'another random text'})
    var event = new Event('input', { bubbles: true });
    this.myinput.dispatchEvent(event);
  }

完整的代码

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    value: 'random text'
    }
  }
  handleChange (e) {
    console.log('handle change called')
  }
  handleClick () {
    this.setState({value: 'another random text'})
    var event = new Event('input', { bubbles: true });
    this.myinput.dispatchEvent(event);
  }
  render () {
    return (
      <div>
        <input readOnly value={this.state.value} onChange={(e) => {this.handleChange(e)}} ref={(input)=> this.myinput = input}/>
        <button onClick={this.handleClick.bind(this)}>Change Input</button>
      </div>
    )
  }
}

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

Codepen

编辑:
正如@Samuel在评论中所建议的那样，如果您像这样在handleChange中使用handleClick，则一种更简单的方法是从don't need to the event object调用handleChange

handleClick () {
    this.setState({value: 'another random text'})
    this.handleChange();
  }

我希望这是您所需要的，对您有帮助。

关于javascript - react : trigger onChange if input value is changing by state?，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42550341/