反应 - 在 child 上单击时创建一个活动的 class

Question

我正在使用 Meteor/ReactJS 并且我正在构建一个带有列表的 TodoList。当用户单击列表项时，我会显示与此列表关联的任务。我可以获取这些项目，我正在使用 parent 函数调用 onClick。问题是我想将 "active" class 添加到我刚刚单击的列表项中。但我不知道如何在 parent class 或 child..

中做到这一点

这是 parent class（我在 render() 中调用这个函数：

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

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

这里是 child:

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

如何在 parent 中获取 selectList 的结果，然后将 class 提供给 child，或者如何处理 child 中的点击并直接在 child ?

中给出 class

非常感谢您的帮助:)

Answer 1

Parent

1.pass 已选择 id 到 List comp

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}
        />
    ));
}

Child

2.Compare list.id 与传递的 selectedItemId，如果为真，则此项目处于活动状态

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>
    );
}

3.then 在 ListGroupItem

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

反应 - 在 child 上单击时创建一个活动的 class

react - create an active class when onClick on child

javascript

state

meteor

reactjs