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

Question

我正在 Meteor 中构建一个带有语义 UI 的 React 应用程序。我有两个地方的事件处理程序似乎无法以任何身份运行，而且我还没有在网上发现任何具有相同程度问题的东西。

下面是我的 React class。我尝试了各种调用 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>
    );
}

});

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

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

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

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

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

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

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

Answer 2

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

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

React event handlers not binding properly

anonymous-function

event-handling

meteor

reactjs

semantic-ui