我有一个简单的无状态父组件,显示有状态子组件列表。每个单独的子组件代表一个列表项,其事件状态可以切换(真/假)。事件列表项变为绿色,并显示关闭(次)。
现在,我的问题是,当选择一个项目(事件)并单击另一项目时,两者都会像预期的那样变为事件状态。然而,我想要的是取消选择/停用前一个项目,这样一次只能有一个项目处于事件状态。我尝试将状态提升到父级并将其作为 Prop 传递下来,但这显然会导致当我单击一个项目时每个项目都处于事件状态。我如何实现这一目标?
下面是代码片段。
import React, { Component } from "react";
class ListItem extends Component {
state = {
isActive: false,
};
onToggleSelect = () =>
this.setState({
isActive: !this.state.isActive,
});
render() {
return (
<li
style={{ color: this.state.isActive && "green", cursor: "pointer" }}
onClick={this.onToggleSelect}
>
Item number {this.props.item}
{this.state.isActive && <span>×</span>}
</li>
);
}
}
function List({ itemList }) {
return (
<div>
<ul>
{
itemList.map(i => <ListItem key={i} item={i} />)
}
</ul>
</div>
);
}
List.defaultProps = {
itemList: [...Array(10).keys()].map(x => x + 1),
};
export default List;
最佳答案
我会将点击处理程序上移一个级别:
import React, { useState } from "react";
function ListItem({ item, isActive, handleClick }) {
return (
<li
style={{ color: isActive && "green", cursor: "pointer" }}
onClick={() => handleClick(item)}
>
Item number {item}
{isActive && <span>×</span>}
</li>
);
}
function List({ itemList }) {
const [activeListItem, setActiveListItem] = useState();
const handleClick = (item) => activeListItem === item ? setActiveListItem() : setActiveListItem(item);
return (
<div>
<ul>
{
itemList.map(i => <ListItem key={i} item={i} handleClick={handleClick} isActive={activeListItem === item} />)
}
</ul>
</div>
);
}
关于javascript - 当我单击/激活另一项时,如何取消选择事件列表项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62260561/