反應事件處理程序繼承

Question

因此，我編寫了一個帶有事件處理程序的組件，該組件應該獲取該元素的ID及其父節點。 我的代碼如下所示：

class Schedule extends React.Component {
    constructor(props){
        super(props);



this.handleSelect = this.handleSelect.bind(this);
    }

handleSelect(e){
    let week = e.target.parentNode.id;
    let day = e.target.id;

    this.props.onSelect(week, day);
}

render(){
    let schedObj = this.props.meal;

    let sched = schedObj.map(weekArr => weekArr.map((dayArr, ind1) => 
        <td id={ind1} className={"div"+ind1} onClick={this.handleSelect}>{dayArr.map(item => <p>{item.rName}</p>)}</td>));

    return(
        <div>
            <table>
                <tbody>
                <tr id="0">
                    {sched[0]}
                </tr>
                <tr id="1">
                    {sched[1]}
                </tr>
                </tbody>
            </table>
        </div>
    );
}

 }

理想情況下，e.target.id將是div的ID，而e.target.parentNode.id將是tr的ID。 但是，當我單擊它時，它會偶爾在div中將p的ID作為e.target.id給出，並將的ID作為e.target.parentNode.id給出。 我猜是因為p嵌套在div中，所以handleSelect（e）事件處理程序仍然適用於它。 我如何才能使它僅適用於div而不適用於其子代？

Answer 1

由於您已經在td元素上定義了onClick，並且在td內有一個<p>標記，因此需要使用e.currentTarget.id來獲取td的ID

handleSelect(e){
    let week = e.target.parentNode.id;
    let day = e.currentTarget.id;

    this.props.onSelect(week, day);
}

currentTarget為您提供了定義處理程序的元素，而target為您提供了發生事件的元素，並且由於您在td有一個p ，因此可能會發生您單擊<p>標簽的情況，因此您不會得到<td>元素onClick的id