在componentDidMount

Question

伙计我正在尝试将侦听器附加到我的反应组件（ModalAddElement＆amp;＆amp; ModalEditElement），直到现在我正在使用jQuery，但我正在寻找React的方法。我有两个实例我的父组件。这是我的组件：

var DiaryTable = React.createClass({displayName: "DiaryTable",
    getInitialState: function() {
        return {
            items : this.props.item,
            globalChecked:false,
            checkedCounter:this.props.checkedCounter
        };
    },


onWheelHandler:function (e) {
      e.bind('mousewheel', function (e) {
            var evt = window.event || e;
            evt = evt.originalEvent ? evt.originalEvent : evt;
            var delta = evt.detail ? evt.detail * (-40) : evt.wheelDelta;
            if (delta > 0) {
                this.value = parseInt(this.value) + 1;
            }
            else {
                this.value = parseInt(this.value) - 1;
            }
        });
    },

    .... more code here

    render: function(){
            var arrayItems =  this.state.items.map(function (item,i) {
                return (
                    <tr key={i}>
                        <td><input type="checkbox"  checked={item.selected} onClick={this.handleChecked.bind(this,i)}/></td>
                        <td><FormattedDate value={item.start}/></td>
                        <td><FormattedDate value={item.end}/></td>
                        <td className="editable">{Number(item.hours)}</td>
                        <td>
                            <ModalEditElement items={this.state.items} onEditElement={this.handleEditElement} index={i} checked={this.state.globalChecked} ></ModalEditElement>
                        </td>
                    </tr>
                );
            }.bind(this));
            return (
                <table className="myTable">
                    <thead>
                    <tr>
                        <th><input type="checkbox" onClick={this.checkAll} checked={this.state.globalChecked}/></th>
                        <th>Start Date:</th>
                        <th>End Date:</th>
                        <th id="hoursField">Hours:</th>
                        <th id="editField">Edit:</th>
                    </tr>
                    </thead>
                    <tbody>
                    {arrayItems}
                    </tbody>
                    <tfoot>
                    <tr>
                        <td colSpan="4">
                            <span className="addButtonDisplay"><ModalAddElement onWheel={this.onWheelHandler} onAddElement={this.handleAddElement} items={this.state.items} checked={this.state.globalChecked} ></ModalAddElement></span>
                            <button className="myButton" onClick={this.remove}>Remove period</button>
                            <button className="myButton" disabled={this.props.result.item.length === 0} onClick={this.setResult}>Set result from merge</button>
                        </td>
                    </tr>
                    </tfoot>
                </table>
            );
        }
     });

那么我应该使用什么才能替换'jQuery（document.body.children [0] .children [0]）'？我可以匹配DiaryTable的两个istances我需要监听器来申请ModalAddElement＆amp;＆amp; ModalEditElement？

Answer 1

您应该查看react event system。

React将为您创建SyntheticEvents实例，这些实例是浏览器本机事件的跨浏览器包装器，它们为您提供与浏览器本机事件相同的界面。

在反应过程中，您可以通过将事件作为具有正确事件名称的道具传递来附加事件。在您的情况下，事件名称为onWheel。

您可以将事件附加到您在组件中呈现的内容，例如，假设您正在渲染div，附加事件的代码将是这样的。

<div onWheel={this.onWheelHandler}>
...
</div>

你的处理程序会收到SyntheticEvent作为参数，你可以做这样的事情

onWheelHandler: function (e) {
  var evt = window.event || e
  evt = evt.originalEvent ? evt.originalEvent : evt;
  var delta = evt.detail ? evt.detail * (-40) : evt.wheelDelta
  if (delta > 0) {
     this.value = parseInt(this.value) + 1;
  }
  else {
     this.value = parseInt(this.value) - 1;
  }
}