在 componentDidMount 中访问 react 组件自己的实例

Question

伙计们，我正试图将侦听器附加到我的react组件(ModalAddElement &&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吗?ModalEditElement ?

Answer 1

你应该检查一下react事件系统。

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

在react中，您可以通过将其作为带有正确事件名称的prop传递来附加事件。在你的例子中，事件名称是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;
  }
}