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

我正在Meteor中构建一个带有语义UI的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>
    );
}

SaveSearchPopout=React.createClass({
getInitialState:函数（）{
返回{username:，queryname:}；
},
HandleUserName更改：功能（e）{
console.log（如target.value）；
this.setState（{username:e.target.value}）
},
handleQuerynameChange:函数（e）{
this.setState（{queryname:e.target.value}）
},
handleSave:函数（e）{
console.log（“处理保存”）；console.log（e）；
e、 预防默认值（）；
警报（“保存！”）；
返回false；
},
render:function（）{
console.log（this）；
返回(
保存搜索
取消
点击
拯救
);
}

}))

该类是从另一个类方法呈现的，该方法如下所示：

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');
},  

saveSearch:function（）{
var backingDiv=document.createElement（'div'）；
backingDiv.id='shadowpopuback'；
document.getElementsByClassName（'content-container'）[0].appendChild（backingDiv）；
ReactDOM.render（，backingDiv）；
//this.props.saveSearch；
$（'.ui.modal.saveSearchPopout'）
.莫代尔({
可关闭：错误，
onDeny:function（）{
var container=document.getElementsByClassName（'content-container'）[0]；
var modalContainer=document.getElementById（'shadowpopuback'）；
容器移除工具（modalContainer）；
}
})
.modal（“show”）；
},  

唯一有效的按钮是语义UI取消按钮

---

有没有其他人遇到过这件事，或者知道我错过了什么。感谢您的帮助。

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

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

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

或者您可以使用箭头函数，因为它们将自动绑定到：

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

---

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

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

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

或者您可以使用箭头函数，因为它们将自动绑定到：

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

---

我最终在这里找到了答案
我还没有研究过它，但看起来这是一个比使用jQuery绑定EventHandler更具反应性的解决方案：。

---

希望这对其他人有帮助。

我最终在这里找到了答案
我还没有研究过它，但看起来这是一个比使用jQuery绑定EventHandler更具反应性的解决方案：。

---

希望这对其他人有帮助。

是的，我试过这个，它是没有变化的变体。这也无助于解释为什么匿名函数不能运行。是的，我已经试过了，它是没有变化的变体。这也无助于解释为什么匿名函数不能运行。