1

我正在Meteor中構建帶有語義UI的React應用程序。我有兩個事件處理程序似乎沒有任何功能的地方,我也沒有發現任何網上有問題的事情。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唯一的按鈕取消按鈕:

類是從另一個類的方法,它看起來像渲染。

有沒有其他人遇到過這個問題,或者有什麼想法,我失蹤了。謝謝您的幫助。

回答

0

不知道是否屬於這種情況,但在更新版本的React(或JSX)中,當您將函數傳遞給HTML組件或自定義組件時,該函數不會自動綁定到this實例。

您必須手動綁定它們。例如:

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

或者你可以使用箭頭功能,因爲它們會自動綁定到這一點:

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

是的,我試過這個,它的變化沒有變化。它也無法解釋爲什麼匿名函數無法運行。 – jwsomis

相關問題