<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clip

about useMergedState(null,{...}) about checkbox HOT 1 OPEN

react-component commented on May 17, 2024 1

about useMergedState(null,{...})

from checkbox.

Comments (1)

U-4-E-A commented on May 17, 2024

I ended up creating my own checkbox by copying this repo and modifying it to fit my needs.

One of the issues I had was with including useMergedState in my module.... this seems to be an export issue with the rc-util package not being developed for ESM.

My solution was to get rid of useMergedState entirely. The alternative was actually quite simple - useEffect and useState combined: -

const [isChecked, setIsChecked] = useState<boolean>(false)

  useEffect(() => {
    setIsChecked(checked || defaultChecked || false)
  }, [setIsChecked, checked, defaultChecked])

  const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
    if (disabled) return
    setIsChecked(!isChecked)
    [...]
  }

Then I can just use the state isChecked as normal (where rawValue would have been used).

I created a test harness of all possibilities and it passed: -

const arr = [
  { checked: undefined, defaultChecked: undefined, expected: false },
  { checked: undefined, defaultChecked: false, expected: false },
  { checked: undefined, defaultChecked: true, expected: true },
  { checked: false, defaultChecked: undefined, expected: false },
  { checked: false, defaultChecked: false, expected: false },
  { checked: false, defaultChecked: true, expected: true },
  { checked: true, defaultChecked: undefined, expected: true },
  { checked: true, defaultChecked: false, expected: true },
  { checked: true, defaultChecked: true, expected: true }
]

All elements displayed and behaved as expected.

Although I am considering moving the defaultChecked option to force this to be a controlled component (personal preference).

from checkbox.

Recommend Projects