如何更改反应中所有复选框的值？答案

【问题标题】：How to change value of all checkboxes in react?如何更改反应中所有复选框的值？
【发布时间】：2021-11-16 17:13:05
【问题描述】：

我想将复选框的值从 true 更改为 false

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

但是当我尝试这样做时，我得到一个错误：Cannot set properties of undefined (setting 'checked') 因为 x 是 HTMLCollection 并且 x[i] 只返回
<input type="checkbox" class="checkbox"> 所以没有“检查”属性。
我该如何处理？

【问题讨论】：

1.请显示您的 HTML 代码和 2. 这是 vanilla JS，而不是 reactjs
以上代码是vanilla JS。不确定 React 在哪里出现。

标签： javascript html reactjs

【解决方案1】：

请在 for 循环中将

for(let i=0; i<x.length; i++) {}

或者让它循环到长度 - 1

for(let i=0; i<=x.length - 1; i++) {}

【讨论】：

【解决方案2】：

试试这个：

<input type="checkbox" checked={this.state.chkbox} onChange={this.handleChangeChk} />

或者你可以在这里查看这个问题的简要说明：

Set checkbox value in React JS

【讨论】：

【解决方案3】：

问题出在 for 循环中。条件应该是i而已。

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

// below for testing purpose
for (let i = 0; i < x.length; i++) {
  console.log(x[i].checked)
}

&lt;input type="checkbox" class="checkbox"&gt;

【讨论】：

【解决方案4】：

最好使用 setState 来管理复选框值 - 最好在 ShadowDOM 中更新这些值，因为这就是 React 的全部意义所在

关于如何实现复选框和反应的具体说明可以在这里找到—— http://react.tips/checkboxes-in-react-16/

【讨论】：

【解决方案5】：

如果这个是代码在 React 应用程序中，正如你建议的那样，你不应该像 React has its own way of particular way of updating the DOM 那样混合原生元素方法和 React JS。

您应该将复选框的状态存储在 state 中，将它们的 checked 状态设置为该状态，然后调用一个函数来更新状态，从而使用该新状态重新渲染。

const { useState } = React;

function Example() {

  const [ state, setState ] = useState(true);

  function handleClick() {
    setState(false);
  }

  return (
    <div>
      <input type="checkbox" checked={state} />
      <input type="checkbox" checked={state} />
      <input type="checkbox" checked={state} />
      <input type="checkbox" checked={state} />
      <button onClick={handleClick}>Uncheck the boxes!</button>
    </div>
  );
};

// Render it
ReactDOM.render(
  <Example />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

【讨论】：

【解决方案6】：

问题在于你没有使用 React 中的状态。

我会这样做。

设置复选框的初始状态：

constructor(props) {
    super(props);
    this.state = {checked : false};
    }

然后将状态传递给输入的checked属性：

<input type="checkbox" checked={this.state.checked} onChange={(e) => this.handleChange(e)} />

在handleChange函数中更新复选框的状态：

handleChange = (e) => {
    this.setState({ checked: e.target.checked })
  }

这应该会更新所有具有checked={this.state.checked} 的复选框

【讨论】：