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

，这是孩子：

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传递给列表 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}
        />
    ));
}

儿童

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

react - 在onClick on child时创建一个活动类

1 个答案: