Question

我正在使用Meteor中的Semantic 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

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

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

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

或者您可以使用箭头功能，因为它们会自动绑定到此：

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

Answer 2

我最终在这里找到了答案。 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。
希望这对其他人有帮助。

React事件处理程序没有正确绑定

2 个答案: