React事件处理程序继承

Posted 2021-03-29

所以我用一个事件处理程序编写了一个组件，它应该获取元素的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而不是它的孩子工作？

答案

由于你已经在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为您提供了事件发生的元素，并且由于p中有td，您可能会因此点击<p>标签，因此您无法获得id <td>元素onClick