React Native Wheel Color Picker如何获取选中色实时更新卡片颜色

问题解决方法 #

问题核心是回调参数使用错误：naeemur开发的React Native Wheel Color Picker的onColorChange事件会主动将当前选中的颜色值作为第一个参数返回给绑定的回调函数，不需要通过this取值。

正确代码修改

• 调整回调函数，接收返回的颜色参数：

function changeCardColour(color) {
  // 直接用回调返回的color值更新状态即可
  setCardColour(color)
}

• ColourPicker组件的调用代码无需修改，保持原有配置即可正常触发更新。

额外说明

React的state更新是异步行为，你原来在setCardColour后直接打印cardColour会拿到更新前的旧值，如果需要监听颜色更新结果，可以添加useEffect监听状态变化：

useEffect(() => {
  // 这里可以拿到最新的卡片颜色值
  console.log(cardColour)
}, [cardColour])

修改完成后即可实现卡片颜色随拾色器选中值实时变化的效果。

内容的提问来源于stack exchange，提问作者JSim