React 17：设置输入值并触发 onChange

编程问答 2022-05-18

问题描述

当我更改输入中的值时，它会触发 onChange。 当我单击按钮时，它会更新状态值。 另一个组件（一个输入）在状态更新后再次渲染，它在屏幕上刷新，但 onChange 没有触发。

有一些解决方案，但我发现它们不适用于 React 17。

我希望它会显示

handleClick  <input id=​"wav" value=​"new value">​
handleChange triggered

事实上，它只能显示。

handleClick  <input id=​"wav" value=​"new value">​

有些人建议手动触发 onChange，但我不知道如何创建合成事件。 就像在 onClick(eventClick) 中调用 handleChange(eventOnChange)，但是如何创建真正的“eventOnChange”，例如 for formik。

参考：React: trigger onChange if input value is changing by state?

class TestTriggerOnChange extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value: 'original value'
    }
  }
  handleChange (e) {
    console.log('handleChange triggered')
  }
  handleClick () {
    console.log('handleClick ',this.myinput)

    this.setState({value: 'new value'})
    var event = new Event('input',{ bubbles: true });
    this.myinput.dispatchEvent(event);
  }
  render () {
    return (
      <div>
        <input id='wav' value={this.state.value}  onChange={(e) => {this.handleChange(e)}} ref={(input)=> this.myinput = input}/>
        <button onClick={this.handleClick.bind(this)}>Change Input</button>
      </div>
    )
  }
}

我使用的包

    "react": "^17.0.0","react-animation-components": "^3.0.0","react-dom": "^17.0.1","react-popper": "^2.2.4","react-redux": "^7.2.2","react-redux-form": "^1.16.14","react-router-dom": "^5.2.0","react-scripts": "^4.0.1","react-transition-group": "^4.4.1","reactstrap": "^8.8.1","redux": "3.7.2","redux-logger": "3.0.6","redux-thunk": "2.2.0",

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

onchangeonchangereactjsreactjsreactjsreactjs