在列表中闪烁一次

Question

我需要在列表中添加一个项目并眨眼 示例代码如下。

我的应用程序有问题，应该执行以下操作：

当我按下添加按钮时，它会闪烁 5 秒。 当我按下其他按钮时，它也闪烁了 5 秒。

现在的问题：

如果我连续多次按"添加"按钮，它将无法正常运行。 例如，如果我连续按两次"添加"按钮： 列表中的第一个被执行(lstmuestra[0].blink=true(，然后是第二个(lstmuestra[1].blink=true(。 5秒后，第一个链接发生变化(lstmuestra[0].blink=false(，因为状态发生变化，整个列表被重新绘制，因为第二个链接仍然存在(lstmuestra[1].blink=true(并再次显示。

请我需要它以正确的顺序出现，并且只有一次 谢谢。

我的代码示例在这里

塞萨尔

Answer 1

您可以创建一个函数来处理给定 id 的每次点击，而不是为每个操作创建一个函数：

取而代之的是：

const cmdBlink0 = () => {
ModifyOrederData(0, { blink: true });
};
const cmdBlink1 = () => {
ModifyOrederData(1, { blink: true });
};
const cmdBlink2 = () => {
ModifyOrederData(2, { blink: true });
};

你可以只有一个这样的函数：

const cmdBlinkN = ( id ) => {
ModifyOrederData( id, { blink: true })
}

并更改每个项目上的 onCLick 事件：

<button onClick={() => cmdBlinkN(0)}>Blink ord 0 </button>
<button onClick={() => cmdBlinkN(1)}>Blink ord 1 </button>
<button onClick={() => cmdBlinkN(2)}>Blink ord 2 </button>

这适用于代码沙箱，但我不确定这是否对您有用。

https://codesandbox.io/s/priceless-bartik-8njjs