Javascript react-在单击子对象时创建活动类

我正在使用Meteor/ReactJS，我正在用列表构建TodoList。当用户单击列表项时，我将显示与此列表关联的任务。 我可以得到项目，我用一个父函数调用onClick。 问题是我想在我刚刚单击的列表项中添加一个“活动”类。但我不知道如何在家长课堂上做，也不知道如何在孩子课堂上做

这是父类（我在render（）中调用此函数）：

selectList（listId）{
this.setState（{listSelected:listId}）；
}
渲染列表（）{
返回此.props.lists.map（（list）=>(
this.selectList（list.\u id）}
键={list.\u id}
list={list}
/>
));
}

这是孩子：

render() {
    return (
        <ListGroupItem onClick={this.props.selectList}>
            {this.props.list.name}
            <span className="pushRight">
                <Glyphicon 
                    onClick={() => this.deleteThisList()}
                    glyph="glyphicon glyphicon-remove"
                />
            </span>
        </ListGroupItem>
    );
}

render（）{
返回(
{this.props.list.name}
this.deleteThisList（）}
glyph=“glyphicon glyphicon remove”
/>
);
}

如何在父级中获得selectList的结果，然后将类提供给子级，或者如何在子级中处理单击并直接在子级中提供类

---

非常感谢您的帮助：）

家长

1.将所选id传递给列表

selectList(listId) {
    this.setState({ listSelected: listId });
}

renderLists() {
    return this.props.lists.map(list => (
        <List
          selectedItemId={this.state.listSelected}
          selectList={() => this.selectList(list._id)}
          key={list._id}
          list={list}
        />
    ));
}

selectList（listId）{
this.setState（{listSelected:listId}）；
}
渲染列表（）{
返回这个.props.lists.map（list=>(
this.selectList（list.\u id）}
键={list.\u id}
list={list}
/>
));
}

儿童

2.将list.id与传递的selectedItemId进行比较，如果为true，则此项处于活动状态

render() {
  const { selectList, list, selectedItemId} = this.props;
    return (
        <ListGroupItem isActive={list.id==selectedItemId} onClick={selectList}>
          {list.name}
          <span className="pushRight">
            <Glyphicon
              onClick={() => this.deleteThisList()}
              glyph="glyphicon glyphicon-remove"
                />
          </span>
        </ListGroupItem>
    );
}

render（）{
const{selectList，list，selectedItemId}=this.props；
返回(
{list.name}
this.deleteThisList（）}
glyph=“glyphicon glyphicon remove”
/>
);
}

3.然后在列表组项目中

  render(){
      const {isActive}=this.props;
        return (
          <div className={"someclass "+(isActive? 'active':'')}>
            .......
          </div>
        );
    }

render（）{
const{isActive}=this.props；
返回(
.......
);
}

我刚刚编辑了一些内容，因为ListGroupItem是react引导元素，现在它工作得很好，非常感谢@Utro！：我很高兴这有帮助！：）

  render(){
      const {isActive}=this.props;
        return (
          <div className={"someclass "+(isActive? 'active':'')}>
            .......
          </div>
        );
    }