不使用 jquery val() 方法调用 React 事件处理程序

IT技术 jquery event-handling reactjs
2021-05-02 22:20:33

如何使用 jquery val() 方法调用react处理程序？

下面是一个带有输入字段的简单react组件。每当值更改时，就会触发 onChange 事件处理程序，并将值设置为组件的状态。

  var Hello = React.createClass({

   getInitialState: function(){
     return {
        val: this.props.defVal || ""
     };
   },
   onChange: function(event){

    var newVal = event.target.value;
    console.log("changed", newVal);
    this.setState({val: newVal});

   },
   render: function() {
     return <div>
     <input id = "asd" className = "asd" value = {this.state.val} onChange = {this.onChange}/>
     Hello {this.props.name}</div>;
   }

  });

  React.render(<Hello name="World" />, document.getElementById('container'));

但是，当我使用 jquery val 方法时，不会触发 onChange 处理程序。像 $('#asd').val("asd");

有没有办法使用 jquery val 函数调用处理程序？

1个回答

你需要：

1.ref在输入项上设置a ，如：

<input id="asd" className="asd" value={this.state.val}
ref={(myInput) => { this.myInput = myInput; }/>

...现在你可以参考this.myInput.value.

比你能

2. 使用一些其他事件运行任意代码，例如 onBlur：

<input id="asd" className="asd" value={this.state.val}
ref={(myInput) => { this.myInput = myInput; }
onBlur={this.onBlur.bind(this)} />

（或更新的 ES6 语法相同）

...和：

3.制作一个函数来处理它，它使用你的ref：

onBlur(e) {
    var newVal = this.myInput.value; // uses the ref
    console.log("changed", newVal);
    this.setState({val: newVal});
}

注意：

与我在非特定于react的页面上阅读的内容相反，您不能这样做：

$('#asd').val("asd").change();

......（至少有一个这样的答案让我天真地兴奋！）

其它你可能感兴趣的问题
上一篇为什么更新的状态没有反映在事件侦听器中：React Native、Hooks 下一篇在 react js 中使用样式的最佳（最佳）方式