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

Question

编辑:我不想仅在单击按钮时才调用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'))

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

Answer 1

您需要手动触发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 在评论中所建议的，如果您不需要事件对象，更简单的方法是从 handleClick 调用 handleChange在 handleChange 中，例如

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

我希望这就是您所需要的并且对您有所帮助。