javascript - react - 当 onClick 子项时创建一个事件类

Question

我正在使用 Meteor/ReactJS，并且正在构建一个带有列表的 TodoList。当用户单击列表项时，我会显示与该列表关联的任务。 我可以获取这些项目，我正在使用父函数调用 onClick 。 问题是我想向我刚刚单击的列表项添加一个“事件”类。但我不知道如何在父类中执行此操作，也不知道如何在子类中执行此操作..

这是父类(我在 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>
    );
}

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

非常感谢您的帮助:)

Answer 1

父级

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

child

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

3.然后在ListGroupItem中

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