gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 16:27:07 26 4
gpt4 key购买 nike

我正在使用 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 的结果,然后将类提供给子级,或者如何处理子级中的点击并直接在子级中提供类?

非常感谢您的帮助:)

最佳答案

父级

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

关于javascript - react - 当 onClick 子项时创建一个事件类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40128883/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com