表单重置后如何删除 React 可见的复选标记？

Question

我正在开发一个带有按钮来重置表单的 React 应用程序。当用户单击“重置”按钮时，所有状态都会恢复到它们的原始值。但即使在所有其他数据都清除后，复选标记仍处于选中状态。它似乎确实重置了状态，但复选标记仍然可见并且对用户来说是混乱的。我知道在初始加载时会读取 defaultChecked，但即使我完全删除 defaultChecked，复选标记仍然存在，所以我不确定问题出在哪里。我怀疑解决方案可能涉及 onChange，但我无法让它发挥作用。任何帮助表示赞赏。

const [checked, setChecked] = useState(false);

const clearSearch = () => {
 setResults([]);
 setQuery("");
 setFormat("");
 setChecked(false); 
}

<label>
  <input 
    type="checkbox" 
    id="searchAll"
    defaultChecked={checked}
    onChange={() => setChecked(!checked)}
    />
    Search all formats
 </label>


<button className="btn btn-danger" 
  onClick={event => {
  event.preventDefault();
   clearSearch();
    }}>
    Reset
 </button>

GitHub 上的 App.js https://github.com/irene-rojas/loc/blob/master/src/App.js

Answer 1

您的复选框实际上是一个 uncontrolled 输入，这可能不是您想要的（它通常不在 React 中）。那是因为，尽管您已将 onChange 事件连接到设置状态的处理程序，但您并没有从该状态读回输入。 defaultChecked 属性除外 - 它不控制它是否实际上被检查。

您需要使用checked 属性，对于复选框而言，它基本上等同于文本或数字输入的value 属性：

<input 
  type="checkbox" 
  id="searchAll"
  checked={checked}
  onChange={() => setChecked(!checked)}
/>

（我已删除您的 defaultChecked 属性，因为我认为您不需要它 - 但如果您愿意，请随时将其放回原处。重要的是有一个 checked 属性从checked 状态值。）