Question

所以我编写了一个带有事件处理程序的组件，该处理程序应该获取元素的id及其parentNode。我的代码看起来像这样：

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，而作为e.target.parentNode.id的id。我猜测因为p嵌套在div中，所以handleSelect（e）事件处理程序仍然适用于它。我怎样才能让这只为div而不是它的孩子工作？

Answer 1

由于您已在td元素上定义了onClick，并且在td中有<p>标记，因此需要使用e.currentTarget.id来获取td

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

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

currentTarget为您提供了定义处理程序的元素，而target为您提供了事件发生的元素，因为p内有td <p>您点击id标记可能会发生这种情况，因此您无法获得<td> onClick元素{{1}}

React事件处理程序继承

1 个答案: