使用 Reactjs 使用道具取消选中复选框和单选按钮

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>

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 一起使用。

为了在移动到不同的项目时重置值（如在我们的密码管理器场景中），我们可以使用名为key的特殊 React 属性。 当一个key改变时，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>
  );
}

Answer 2

您可以创建附加到要以编程方式检查和取消选中的元素的引用。

然后有一个管理取消选中的功能

uncheckAll() {
    // the length of the array below should
   //  depend on the numbers of ref you have

   [1].forEach((refId) => this.refs[`ref_${refId}`].unCheck)
}

注意：这假设您的组件基于 class

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