javascript - 使用 Reactjs 使用 props 取消选中复选框和单选按钮

Question

我想取消选中我的复选框，但它确实取消了选中，但在取消选中后它给出了错误

    console.log()

    var x = document.getElementsByName("checkbox");
    for(let i=0; i<=x.length; i++) {
      x[i].Checked = false;
      }   
  }

<button onClick={() => clearClickHandler()}>Clear all filter</button>

<input type="checkbox" name="checkbox" defaultChecked={false} onChange={() => sortDispatch({payload: "INCLUDE_OUT_OF_STOCK"})}></input>
          Include out of stock
        </label>

标签： javascriptreactjsreact-props

Answer 1

问题

直接 DOM 突变在 React 中是反模式，即使由于更改发生在 React外部而没有引发错误，React 也不会意识到更改并且不会重新渲染 UI。

var x = document.getElementsByName("checkbox");
for(let i = 0; i <= x.length; i++) {
  x[i].Checked = false; // <-- mutation!!! should probably also be `.checked`
}

解决方案

您可以将完全不受控制的组件与 key 一起使用。

为了在移动到不同项目时重置值（如在我们的密码管理器场景中），我们可以使用特殊的 React 属性，称为key. 当 akey发生变化时，React 将创建一个新的组件实例，而不是更新当前的。键通常用于动态列表，但在这里也很有用。

这是一个使用 React 键对一组输入应用的示例演示。

function App() {
  const [key, setKey] = useState(0);

  const clearClickHandler = () => setKey((k) => k + 1);

  return (
    <div className="App">
      <Fragment key={key}> // <-- React key updates will "reset" inputs
        <label>
          <input type="checkbox" name="checkbox1" defaultChecked={false} />
          Include out of stock
        </label>
        <label>
          <input type="checkbox" name="checkbox2" defaultChecked={false} />
          Include out of stock
        </label>
        <label>
          <input type="checkbox" name="checkbox3" defaultChecked={false} />
          Include out of stock
        </label>
      </Fragment>

      <div>
        <button onClick={clearClickHandler}>Clear all filter</button>
      </div>
    </div>
  );
}