React事件处理程序未正确绑定

Question

我正在Meteor中构建带有语义UI的React应用程序。我有两个事件处理程序似乎没有任何功能的地方，我也没有发现任何网上有问题的事情。

以下是我的React类。我尝试过调用eventHandler方法的各种方法，但没有任何工作。这似乎也不相关，因为我甚至无法获得匿名函数来运行。

SaveSearchPopout = React.createClass({ 
getInitialState: function() { 
    return {username: "", queryname: ""}; 
}, 
handleUsernameChange:function(e) { 
    console.log(e.target.value); 
    this.setState({username: e.target.value}) 
}, 
handleQuerynameChange:function(e) { 
    this.setState({queryname: e.target.value}) 
}, 
handleSave:function(e) { 
    console.log("handling save");console.log(e); 
    e.preventDefault(); 
    alert("saving!"); 
    return false; 
}, 

render: function() { 
    console.log(this); 
    return (
     <div className="ui modal saveSearchPopout"> 
      <div className="header">Save Search</div> 
      <div className="content"> 
       <form className="ui form" onSubmit={function() {console.log("test");}}> 
        <div className="field"> 
         <input type="text" name="username" 
          placeholder="Username" 
          value={this.state.username} 
          onChange={function() {console.log("update")}} /> 
        </div> 
        <div className="field"> 
         <input type="text" name="queryname" 
          placeholder="Name this search" 
          value={this.state.queryname} 
          onChange={this.handleQuerynameChange}></input> 
        </div> 
        <div className="actions"> 
         <div className="ui cancel button">Cancel</div> 
        </div> 
         <button type="submit">Click</button> 
         <button className="ui button" type="button" 
          onClick={function() {console.log("saving");}}>Save</button> 

       </form> 
      </div> 
     </div> 
    ); 
} 

}）;

saveSearch: function() {   
    var backingDiv = document.createElement('div'); 
    backingDiv.id = 'shadowPopupBack'; 
    document.getElementsByClassName('content-container')[0].appendChild(backingDiv); 
    ReactDOM.render(<SaveSearchPopout />, backingDiv); 
    //this.props.saveSearch; 
    $('.ui.modal.saveSearchPopout') 
     .modal({ 
      closeable:false, 
      onDeny: function() { 
       var container = document.getElementsByClassName('content-container')[0]; 
       var modalContainer = document.getElementById('shadowPopupBack'); 
       container.removeChild(modalContainer); 
      } 
     }) 
     .modal('show'); 
}, 

的作品是语义UI唯一的按钮取消按钮：

类是从另一个类的方法，它看起来像渲染。

有没有其他人遇到过这个问题，或者有什么想法，我失踪了。谢谢您的帮助。

Answer 1

我终于找到了答案在这里。 Semantic UI modal component onClose with React
我还没有完成它，但它看起来像这是比使用jQuery绑定eventHandlers更具反应性的解决方案：http://www.agilityfeat.com/blog/2015/09/using-react-js-and-semantic-ui-to-create-stylish-apps。
希望这对别人有帮助。

Answer 2

不知道是否属于这种情况，但在更新版本的React（或JSX）中，当您将函数传递给HTML组件或自定义组件时，该函数不会自动绑定到this实例。

您必须手动绑定它们。例如：

onChange={this.handleQuerynameChange.bind(this)} 

或者你可以使用箭头功能，因为它们会自动绑定到这一点：

onChange={e => this.handleQuerynameChange(e)}