对子项单击时未接收值的列表项的反应 onClick 函数

Question

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

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

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

我已经阅读了很多基于渲染方法内部绑定的建议，但我知道这不是推荐的做法。

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 }

Answer 1

好的，我已经通过修改“internalHandleSelectTeam”函数让它工作了：

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

我不确定这是否是一种好的做法，但它可以工作并且不需要在渲染函数中进行绑定。