Йосиф Михайлов Йосиф Михайлов - 3 months ago 14
jQuery Question

access react component's own instance in componentDidMount

Guys I'm trying to attach a listener to my react component (ModalAddElement && ModalEditElement) and till now I was doing it with jQuery but I'm lookin for the React's way of doing it.I have two instances of my parent component.Here's my component:

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>
);
}
});


So what should I use in order to replace 'jQuery(document.body.children[0].children[0])' ?Can I match both istances of DiaryTable I need the listener to apply for ModalAddElement && ModalEditElement ?

Answer

You should check react event system.

React will created SyntheticEvents instances for you, these instances are a cross-browser wrapper around the browser's native event and they offer you the same interface as the browser's native events.

In react you can attach an event by passing it as a prop with the correct event name. In your case the event name is onWheel.

You can attach the event to what you render in you're component, for example imagine that you're rendering a div, the code to attach the event would be something like this.

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

You're handler will receive the SyntheticEvent as a parameter and you can do something like this

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;
  }
}
Comments