javascript - react-color组件不能调透明度是为什么？

Question

"react": "^16.13.1","react-color": "^2.19.3",

<ChromePicker     color='#f6f6f687'      onChange={ this.handleChangeComplete }      onChangeComplete={ this.handleChangeComplete2 }/>

穿默认的值，透明度在组件上会显示，但是不能修改透明度，拖动不了滑块

Answer 1

因为你传入的是十六进制颜色值的 #f6f6f687 ，对应的 RGBA 值就是 rgba(246, 246, 246, 0.53)。

另外就是因为所以不能修改是因为你直接传入的固定的 #f6f6f687 色值，并不是一个可以被修改的变量，所以并不能被修改（因为React有受控组件的概念）。

---

color - React Color

Answer 2

react-color 组件库中的 ChromePicker 组件默认应该支持透明度的调整。如果你发现透明度滑块无法拖动，这可能是由于以下几个原因造成的：

1. 版本问题：虽然你使用的版本应该支持透明度调整，但可能存在bug。首先，请确保你使用的是最新的稳定版本。如果可能，尝试升级到最新版本的 react-color 来看问题是否得到解决。
2. CSS 问题：有时，组件的样式可能会被外部 CSS 覆盖或影响。请检查你的项目 CSS 是否可能影响到了 react-color 组件的样式。
3. 事件处理：如果 this.handleChangeComplete 或 this.handleChangeComplete2 方法中存在错误或阻止了事件冒泡，可能会影响到滑块的行为。请确保这些事件处理方法正确无误。
4. 组件实例问题：如果 ChromePicker 组件的实例有问题，可能会导致功能异常。确保组件被正确渲染和初始化。
5. 其他依赖或配置问题：项目中其他依赖或配置可能会影响 react-color 组件的工作。请检查是否有其他库或插件可能与 react-color 冲突。

如果以上都没有解决问题，你可以尝试以下步骤：

• 查看文档和示例：确保你遵循了 react-color 的官方文档和示例代码。
• 简化问题：尝试创建一个简单的示例，只包含 ChromePicker 组件和一个简单的处理函数，看看问题是否仍然存在。
• 控制台错误：检查浏览器控制台是否有任何错误或警告信息，这可能会给你提供关于问题的线索。
• 搜索问题：在 react-color 的 GitHub 仓库、Stack Overflow 或其他开发者社区中搜索类似的问题，看看是否有人遇到过并解决了相同的问题。

如果问题仍然存在，并且你无法找到解决方案，你可以考虑在 Stack Overflow 或 react-color 的 GitHub 仓库中提问，提供更多的代码和错误信息，以便其他开发者帮助你解决问题。