反应:如果输入值因状态而变化，则触发 onChange? [英] React: trigger onChange if input value is changing by state?

问题描述

我不想仅在单击按钮时调用 handleChange.它与 handleClick 无关.我在@shubhakhatri 回答的评论中举了一个例子.

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

class App 扩展 React.Component {构造函数(道具){超级(道具)this.state = {值:'随机文本'}}句柄变化(e){console.log('handle change called')}句柄点击(){this.setState({value: '另一个随机文本'})}使成为 () {返回 (<div><输入值={this.state.value} onChange={this.handleChange}/><button onClick={this.handleClick.bind(this)}>更改输入</button>

)}}ReactDOM.render(, document.getElementById('app'))

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

解决方案

您需要手动触发 onChange 事件.在文本输入上 onChange 监听 input 事件.

所以在你的 handleClick 函数中你需要触发像

这样的事件

handleClick(){this.setState({value: '另一个随机文本'})var event = new Event('input', { bubbles: true });this.myinput.dispatchEvent(事件);}

完整代码

class App 扩展 React.Component {构造函数(道具){超级(道具)this.state = {值:'随机文本'}}句柄变化(e){console.log('handle change called')}句柄点击(){this.setState({value: '另一个随机文本'})var event = new Event('input', { bubbles: true });this.myinput.dispatchEvent(事件);}使成为 () {返回 (<div><input readOnly value={this.state.value} onChange={(e) =>{this.handleChange(e)}} ref={(input)=>this.myinput = input}/><button onClick={this.handleClick.bind(this)}>更改输入</button>

)}}ReactDOM.render(, document.getElementById('app'))

Codepen

正如@Samuel 在评论中所建议的，如果您不需要事件对象，则更简单的方法是从 handleClick 调用 handleChange在 handleChange 像

handleClick(){this.setState({value: '另一个随机文本'})this.handleChange();}

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

Edit: I don't want to call handleChange only if the button has been clicked. It has nothing to do with handleClick. I gave an example in the @shubhakhatri answer's comment.

I want to change the input value according to state, the value is changing but it doesn't trigger handleChange() method. How can I trigger handleChange() method ?

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

Here is the codepen link: http://codepen.io/madhurgarg71/pen/qrbLjp

解决方案

You need to trigger the onChange event manually. On text inputs onChange listens for input events.

So in you handleClick function you need to trigger event like

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

Complete code

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

Edit: As Suggested by @Samuel in the comments, a simpler way would be to call handleChange from handleClick if you don't need to the event object in handleChange like

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

I hope this is what you need and it helps you.

这篇关于反应:如果输入值因状态而变化，则触发 onChange?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！