Javascript React-click事件一次触发所有同级

我怎么能让每个

接收到

onClick

事件的

一次只触发一个

我的目的是根据单击事件更改颜色和显示/隐藏内容。但是，只要点击一个给定的

它的所有兄弟姐妹也会同时被解雇

我怎样才能避免呢


函数应用程序（）{
返回(
);
}
类市场扩展组件{
构造函数（）{
超级（）；
此.state={
isColor:错，
伊莎：错，
水果：[“苹果”、“香蕉”、“桃子”]
};
}
handleToggle=（）=>{
this.setState（currentState=>({
isColor:！currentState.isColor，
isShow:！currentState.isShow
}));
};
render（）{
const fruits=this.state.fruits.map（（项目，i）=>(

{item}
显示文本

));
返回
{fruits}
；
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；
您的
并没有全部启动。
所有元素都在检查状态，以查看颜色和可视性是否为真。
所以你有一个状态，对于三个元素，当一个为真时，它们都为真

您可以为每个水果创建一个处于状态的对象，或者更好的做法是为每个都有自己状态的列表项创建一个新组件，并通过一个道具传递水果名称

我已经用叉子叉了你的沙箱，并创建了一个关于这个样子的快速模型。这是一个核心概念，将事物分解成可重用的模块，并在可能的情况下让组件管理自己的状态。从长远来看，现在真正了解这个想法对您确实有好处，因此我希望这会有所帮助。
所有单击处理程序不会同时启动，但您可以保留一个变量来指示是否显示所有单击处理程序

相反，您可以将对象保持在您的状态，在该状态下，您可以保持键值对，以指示是否显示某个项

示例


class.Component{
状态={
水果：[“苹果”、“香蕉”、“桃子”]，
伊肖恩：{}
};
handleToggle=项目=>{
this.setState（currentState=>({
isShown:{…currentState.isShown[item]：！currentState.isShown[item]}
}));
};
render（）{
返回(

{this.state.fruits.map（（项，i）=>(
this.handleToggle（项）}
>
{item}
显示文本

))}

);
}
}
render（，document.getElementById（“根”））
这里有一个工作沙箱，用于@SpeedOfRound建议的方法。为每个
li
创建一个独立的组件，以便该元素具有自己的状态。我不知道与@Tholle的答案相比，这种方法是否有效

沙盒[]
您能给我举一个后一种建议的例子吗？非常感谢。我将进入React，并将继续理解模块化和组件内的传递道具，如您所述。谢谢。我也会研究和学习你的解决方案。我不熟悉访问状态的
[]
符号，即：
this.state.isShown[item]
@NullisTrue不客气！它是一个字符串与动态获取和设置属性的组合。@Thole使用自己的状态为每个
li
元素创建不同的组件，这种方法与您的方法相比成本高吗？@Vivek性能上的差异很可能可以忽略不计。您可以选择最具可读性且最适合您的用例的内容。@在您的示例中，我如何像您一样提升状态，并处理作为道具传递的子组件（即
）上的单击事件？换句话说，我们如何通过提升状态并使子对象成为其父对象控制的组件来实现同样的目标？谢谢你，Thole建议的对于这个例子来说是完全可行的，但是它不能很好地扩展。如果你用150种不同的属性管理1000种水果，这将变得不可持续。这样做只是更好的练习。有道理。谢谢，@SpeedOfRound