时间戳

首页 > 解决方案 > 表单重置后如何删除 React 可见的复选标记？

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

问题描述

我正在开发一个带有按钮来重置表单的 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

标签： javascriptreactjsformscheckbox

解决方案

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

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

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

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

推荐阅读