얘들 아 내 반응 구성 요소 (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의 두 인스턴스를 모두 일치시킬 수 있습니까? ModalAddElement && ModalEditElement를 신청하려면 리스너가 필요합니까?
반응 이벤트 시스템을 확인해야 합니다 .
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;
}
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다