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

【问题标题】：React event handlers not binding properlyReact 事件处理程序未正确绑定
【发布时间】：2016-05-26 23:07:52
【问题描述】：

我正在 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 取消按钮。

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

【问题讨论】：

标签： meteor reactjs event-handling anonymous-function semantic-ui

【解决方案1】：

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

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

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

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

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

【讨论】：

是的，我试过了，它的变化没有任何变化。它也无助于解释为什么匿名函数不会运行。

【解决方案2】：

我最终在这里找到了答案。 Semantic UI modal component onClose with React
我还没有完成它，但看起来这比使用 jQuery 绑定事件处理程序更具反应性：http://www.agilityfeat.com/blog/2015/09/using-react-js-and-semantic-ui-to-create-stylish-apps.
希望这对其他人有帮助。

【讨论】：