Реагировать на наследование обработчика событий

Question

Итак, я написал компонент с обработчиком событий, который должен получить идентификатор элемента и его 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, а e.target.parentNode.id будет идентификатором для tr.Однако, когда я нажимаю на него, он иногда дает мне идентификатор p в div как e.target.id, а для for как e.target.parentNode.id.Я предполагаю, что поскольку p вложено в div, обработчик события handleSelect (e) все еще применяется к нему.Как я могу заставить это работать только на div, а не на его детей?

Answer 1

Поскольку вы определили onClick для элемента td и у вас есть тег <p> внутри td, вам нужно использовать 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