Question

具有react-color https://casesandberg.github.io/react-color/。
我可以从react-color使用现成的onChangeComplete函数。

但是我想知道如何通过使用输入类型颜色标记来创建onChangeComplete。我尝试过onBlur，但是颜色不会改变，直到用户单击或按下选项卡

另一方面，使用onChange保持触发更新。
因为当前我正在使用redux状态，所以在拖动并选择颜色时连续调度更新不是一个好方法。

有什么想法如何创建onChangeComplete吗？

Answer 1

这取决于您如何定义更改。为了防止每次鼠标移动时都进行连续更新，您可能只想在鼠标停止移动时更新Redux状态。（这似乎是page you linked to上的行为）。

您可以使用以下JavaScript来检测鼠标何时停止移动：

let timer;

window.addEventListener('mousemove', function (e) {
  console.log('Mouse moving');
  clearTimeout(timer);
  timer = setTimeout(() => console.log('Mouse stopped'), 300);
});

然后，尝试将上面的代码放入您的ComponentDidMount()方法中，并将console.log('Mouse stopped')替换为您要调度的Redux动作！

300是不移动的毫秒数，该毫秒数将触发操作，可以根据您希望应用感觉到的敏感程度来更改。

最后，请记住使用ComponentWillUnmount()方法中的remove the event listener。

Answer 2

https://github.com/casesandberg/react-color/blob/7ee60d845e5d5e11e4f6ecb895b2d9755c59d09d/src/components/common/ColorWrap.js#L30

这是react-color如何实现onChangeComplete的代码。使用去抖动对它进行硬编码。我将链接放在此处，以供有兴趣使用该解决方案的人

如何在React上为输入类型的颜色创建自己的onChangeComplete函数

2 个答案: