Question

如何使用jquery val（）方法调用反应处理程序？

下面是一个带输入字段的简单反应组件。每当值更改时，onChange事件处理程序都会被触发 value设置为组件的状态。

  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处理程序。喜欢$（＆＃39;＃asd＆＃39;）。val（＆＃34; asd＆＃34;）;

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

Answer 1

你需要：

1.在输入项上设置'\0'，如：

ref

...现在您可以参考<input id="asd" className="asd" value={this.state.val} ref={(myInput) => { this.myInput = myInput; }/>。

比你可以

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

this.myInput.value

（或更新的ES6语法）

...和

3.制作一个处理它的函数，它使用你的<input id="asd" className="asd" value={this.state.val} ref={(myInput) => { this.myInput = myInput; } onBlur={this.onBlur.bind(this)} />：

ref

<强> NB：

与我在非特定反应的网页上看到的相反，你不能这样做：

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

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

不使用jquery val（）方法调用React事件处理程序

1 个答案: