当点击子项时，对列表项没有接收值的ReClick onClick函数

Posted 2021-04-20

我正在使用Bootstrap构建一个基本表，我想处理用户点击一行，以便我可以将其标记为已选中。

我的列表项有嵌套元素。当我直接单击列表项时，将调用onClick处理程序并正确设置'event.target.value'。

当我单击嵌套元素时，仍会调用onClick处理程序，但未定义'event.target.value'。

我已经阅读了很多基于render方法内部绑定的建议，但我知道这不是一个值得推荐的事情。

class TeamListItem extends Component {

    constructor(props) {
        super(props);
        this.internalHandleSelectTeam = this.internalHandleSelectTeam.bind(this);
    }

    internalHandleSelectTeam(event) {
        console.log(event.target.value);
    }

    render() {
        const team = this.props.team;   
        return (
            <li className="list-group-item" value={team.teamId} onClick={this.internalHandleSelectTeam}>
                <Row>
                    <Col xs={10} sm={8} md={6}>
                        {team.teamName}
                    </Col>
                    <Col xs={2} sm={4} md={6}>
                        {team.resourceList.length}
                    </Col>
                </Row>      
            </li>
        );
    }
}

export { TeamListItem }

答案

好的，我通过修改'internalHandleSelectTeam'功能来实现它：

internalHandleSelectTeam() {
    const teamId = this.props.team.teamId;
    this.props.onSelectTeam(teamId);
}

我不确定这是不是很好的做法，但是它有效并且不需要在render函数内部进行绑定。