React: trigger onChange, если входное значение изменяется по состоянию?

Изменить: Я не хочу вызывать 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

Ответ 1

Вам нужно запустить событие onChange вручную. В текстовых вложенияхChange прослушивает события 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();
  }

Надеюсь, это то, что вам нужно, и это поможет вам.

Ответ 2

Я думаю, вы должны изменить это так:

<input value={this.state.value} onChange={(e) => {this.handleChange(e)}}/>

Это в принципе то же самое, что и onClick={this.handleClick.bind(this)}, как вы это делали на кнопке.

Итак, если вы хотите называть handleChange() при нажатии кнопки, чем:

<button onClick={this.handleChange.bind(this)}>Change Input</button>

или

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

Ответ 3

Вызывается

handleChange ('handle change called' напечатан в консоли), но он не обновляет состояние. Вы должны обновить состояние в своем обработчике изменений:

handleChange (e) {
    console.log('handle change called');
    this.setState({value: e.target.value});
}

и вы также должны привязать контекст к обработчику:

<input value={this.state.value} onChange={this.handleChange.bind(this)}/>

Ответ 4

Я знаю, что вы имеете в виду, вы хотите вызвать handleChange нажатием кнопки.

Но изменение значения состояния не будет вызывать событие onChange, потому что событие onChange является событием элемента формы.