React color ChromePicker alpha 滑块不起作用。是否需要使用 Alpha 个人 API？

Question

我正在尝试从 https://casesandberg.github.io/react-color/#examples 实现 react-color 我正在使用 ChromePicker 组件，但 Alpha 滑块无法正常工作，正如预期的那样。滑块可以正常工作，但滑块没有继续移动。

这里是 https://codesandbox.io/s/react-color-nkh7w 例子。是否缺少任何组件？

Answer 1

问题是 react-color 组件（如您正在使用的 ChromePicker）不直接接受 alpha/opacity 的属性。您有两个选择：

仅使用 color.rgb 值，不分隔 alpha。如果将 rgb 对象作为 color 属性) 传递，它应该按预期工作。
您可以获取 color.rgb.a 值，将其转换为十六进制，并将其附加到 color.hex 字符串。

Answer 2

color.hex 不包含 alpha 值。您可以 color.rgba 代替，也可以使用 rgb-hex 包将其转换为十六进制以使其可显示：

import { ChromePicker } from "react-color";
import rgbHex from "rgb-hex";
const App = () => {
  const [color, setColor] = useState("#fff");
  return <>
    <ChromePicker
      color={color}
      onChange={c =>
        setColor("#" + rgbHex(c.rgb.r, c.rgb.g, c.rgb.b, c.rgb.a))
      }
    />
    <p>You picked {color}</p>
  </>
}

React color ChromePicker alpha 滑块不起作用。是否需要使用 Alpha 个人 API？

React color ChromePicker alpha slider does not work. Is required use Alpha individual API?

color-picker

reactjs

react-color