我怎样才能拥有每个 <li />
收到 onClick
事件仅一次一个单独触发?
我的目的是根据点击事件更改颜色并显示/隐藏内容。它有效,但是单击给定的 <li/>
后所有其 sibling 也同时被解雇。
我怎样才能防止这种情况发生?
function App() {
return (
<div className="App">
<Market />
</div>
);
}
class Market extends Component {
constructor() {
super();
this.state = {
isColor: false,
isShow: false,
fruits: ["Apple", "Banana", "Peach"]
};
}
handleToggle = () => {
this.setState(currentState => ({
isColor: !currentState.isColor,
isShow: !currentState.isShow
}));
};
render() {
const fruits = this.state.fruits.map((item, i) => (
<li
key={i}
className={this.state.isColor ? "blue" : "red"}
onClick={this.handleToggle}
>
{item}
<span className={this.state.isShow ? "show" : "hide"}>Show Text</span>
</li>
));
return <ul>{fruits}</ul>;
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
最佳答案
您的<li>
并不是全部都在开火。
所有元素都在检查状态以查看颜色和可见性是否为真。
因此,对于三个元素,你有一种状态,当其中一个为真时,它们都为真。
您要么想要为每个水果创建一个状态对象,或者更好的是,为每个都有自己状态的列表项创建一个新组件,并通过 prop 传递水果名称。
我已经 fork 了你的沙箱并创建了一个快速 example这看起来像什么。这是一个核心 React 概念,即将事物分解为可重用的模块,并在可能的情况下让组件管理自己的状态。从长远来看,现在真正把这个想法记下来确实对你有好处,所以我希望这会有所帮助。
关于javascript - React - 单击事件立即触发所有同级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53344008/