uiwjs / react-color

🎨 Is a tiny color picker widget component for React apps.
https://uiwjs.github.io/react-color
MIT License
291 stars 96 forks source link

onChange 用useCallback 包裹 ,onChange里面无法修改父组件的状态!把useCallback 干掉可以吗? #111

Closed RobinYang11 closed 1 year ago

RobinYang11 commented 1 year ago

image image

jaywcjlove commented 1 year ago

@RobinYang11 https://codesandbox.io/embed/lucid-https-5718lo?fontsize=14&hidenavigation=1&theme=dark

image

我测试并没有什么问题

RobinYang11 commented 1 year ago

import "./styles.css"; import { useState } from "react"; import Alpha from "@uiw/react-color-alpha"; import { hsvaToRgbaString } from "@uiw/color-convert";

function Demo() { const [hsva, setHsva] = useState({ h: 0, s: 0, v: 68, a: 1 }); const [obj,setObj] = useState({ name:"robin", age:33 })

return ( <> <Alpha hsva={hsva} onChange={(newAlpha) => { setHsva({ ...hsva, ...newAlpha }); setObj({ ...obj }) }} /> {obj.name} <button onClick={()=>{ setObj({ ...obj, name: "changedName" }) }}>changeName <div style={{ background: hsvaToRgbaString(hsva), marginTop: 30, padding: 10 }}

{JSON.stringify(hsva)}

  </div>
</>

); }

export default function App() { return (

Hello CodeSandbox

Start editing to see some magic happen!

); }

RobinYang11 commented 1 year ago

先点击button 改变名字, 然后你再拖动 ,name 就变为初始值了,就是因为包了useCallback

RobinYang11 commented 1 year ago

@RobinYang11 https://codesandbox.io/embed/lucid-https-5718lo?fontsize=14&hidenavigation=1&theme=dark

image

我测试并没有什么问题

https://codesandbox.io/s/naughty-thompson-19bp2o?file=/src/App.js:341-342

jaywcjlove commented 1 year ago
image

@RobinYang11 你拖动的时候,不是去改变了 name ?

jaywcjlove commented 1 year ago

先点击button 改变名字, 然后你再拖动 ,name 就变为初始值了,就是因为包了useCallback

我看了示例,name 并没有变成初始值,而是 onChange 去更改了 name 的值

RobinYang11 commented 1 year ago

你再刷新一下 我的例子 我改了,我增加了一个数组字段

RobinYang11 commented 1 year ago

@jaywcjlove https://codesandbox.io/s/naughty-thompson-19bp2o?file=/src/App.js

jaywcjlove commented 1 year ago

@RobinYang11 Upgrade v1.1.4

jaywcjlove commented 1 year ago

https://codesandbox.io/embed/clever-sun-2yi6s0?fontsize=14&hidenavigation=1&theme=dark