Question

这是我的代码的简化版本。解决过时状态的好的解决方案是什么？

想要的行为：焦点输入字段->出现下拉列表（状态为true）->单击按钮->下拉列表消失（状态为false）

实际行为：焦点输入字段->呈现下拉菜单（状态为true）->单击按钮->下拉菜单消失0.1秒（状态为false）->下拉菜单出现（状态为true）

const DropdownSelector = () => {
  const [toggleEnabled, setToggleEnabled] = useState(false);

  const handleToggle = () => setToggleEnabled(!toggleEnabled);

  const handleFocus = () => setToggleEnabled(true);

  return (
    <div>
      <input value={val} onFocus={handleFocus} />
      <button onClick={handleToggle}>
      {toggleEnabled && (
        <div>I'm a dropdown</div>
      )}
    </div>
  )
}

Answer 1

当新状态取决于先前状态和/或道具时，您应该将函数传递给setState

const handleToggle = () =>
  setToggleEnabled((previousToggle) => !previousToggle);

resource

React如何解决陈旧状态？

1 个答案: