表单重置后如何删除 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>

App.js 在 GitHub 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 状态值读取的属性。）

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

How remove React visible checkmark after form reset?

javascript

forms

checkbox

reactjs