Javascript 确定何时在ReactJS中至少选中一个复选框

我正在尝试确定何时至少签入一个复选框

我有一个复选框组件：

import * as React from 'react';
import * as DOM from 'react-dom';
import PropTypes from 'prop-types';

class Checkbox extends React.Component {
  constructor(props) {
        super(props);
  }

    render() {
      return(
        <div>
        <label>
        <input 
      type="checkbox" 
      name={this.props.value} 
      value={this.props.value} 
      onClick={this.props.function}
      />
    <span>
      <span>
        {this.props.title}
      </span>
    </span>
  </label>
  </div>
      );
    }
}

Checkbox.PropTypes = {
  title: PropTypes.string,
  value: PropTypes.string,
  function: PropTypes.func,
}

export default NewsletterCheckbox;

  checkFields() {
    // check if other fields are not empty and valid
    console.log(this.state);
  }
  isCheckboxChecked(event) {
    // determine if at least one checkbox is checked, and if so
    // update state
    const checkboxes = document.querySelectorAll('input[type="checkbox"]');
    const checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);
    if (checkedOne) {
      this.setState({ checkboxValid: true }, this.checkFields);
    } else {
      this.setState({ checkboxValid: false }, this.checkFields);
    }
  }     
  const newsletterArray = NewsletterData.map((obj) => (
    <div key={obj.value}>
      <div>
      <Checkbox
        value={obj.value}
        title={obj.title}
        function={this.isCheckboxChecked}
        />
      </div>
      <p>
          {obj.body}
          <br />
        <a onClick={(e) =>  {this.handleModal(e) }} data-iframe={obj.link}>
            See Preview
          </a>
        </p>
    </div>
  ));

import*as React from'React'；
从“react DOM”导入*作为DOM；
从“道具类型”导入道具类型；
类复选框扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{this.props.title}
);
}
}
Checkbox.PropTypes={
标题：PropTypes.string，
值：PropTypes.string，
函数：PropTypes.func，
}
导出默认复选框；

它被导入并在父组件中使用：

import * as React from 'react';
import * as DOM from 'react-dom';
import PropTypes from 'prop-types';

class Checkbox extends React.Component {
  constructor(props) {
        super(props);
  }

    render() {
      return(
        <div>
        <label>
        <input 
      type="checkbox" 
      name={this.props.value} 
      value={this.props.value} 
      onClick={this.props.function}
      />
    <span>
      <span>
        {this.props.title}
      </span>
    </span>
  </label>
  </div>
      );
    }
}

Checkbox.PropTypes = {
  title: PropTypes.string,
  value: PropTypes.string,
  function: PropTypes.func,
}

export default NewsletterCheckbox;

  checkFields() {
    // check if other fields are not empty and valid
    console.log(this.state);
  }
  isCheckboxChecked(event) {
    // determine if at least one checkbox is checked, and if so
    // update state
    const checkboxes = document.querySelectorAll('input[type="checkbox"]');
    const checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);
    if (checkedOne) {
      this.setState({ checkboxValid: true }, this.checkFields);
    } else {
      this.setState({ checkboxValid: false }, this.checkFields);
    }
  }     
  const newsletterArray = NewsletterData.map((obj) => (
    <div key={obj.value}>
      <div>
      <Checkbox
        value={obj.value}
        title={obj.title}
        function={this.isCheckboxChecked}
        />
      </div>
      <p>
          {obj.body}
          <br />
        <a onClick={(e) =>  {this.handleModal(e) }} data-iframe={obj.link}>
            See Preview
          </a>
        </p>
    </div>
  ));

checkFields（）{
//检查其他字段是否为空且无效
console.log（this.state）；
}
isCheckboxChecked（事件）{
//确定是否至少选中了一个复选框，如果是
//更新状态
const checkbox=document.querySelectorAll（'input[type=“checkbox”]”）；
const checkedOne=Array.prototype.slice.call（复选框）.some（x=>x.checked）；
如果（选中一个）{
this.setState（{checkboxValid:true}，this.checkFields）；
}否则{
this.setState（{checkboxValid:false}，this.checkFields）；
}
}     
常量时事通讯数组=时事通讯数据.map（（obj）=>(

{obj.body}


{this.handleModel（e）}数据iframe={obj.link}>
参见预览

));

我遇到的问题是，当选中任何复选框时运行的函数，

isCheckboxChecked（）

，一旦选中一个字段，如果我取消选中该字段（或选中一组，然后全部取消选中），它将不会返回为false

---

是否有更好的方法可以在不查询DOM的情况下检查React中是否至少选中了一个复选框（使用React呈现的复选框似乎无法正常工作）？

您应该保留选中复选框的计数器

构造函数（道具）{
超级（道具）；
this.state={checkCount:0}
}
{
如果（例如，选中目标）
this.setState（（prevState）=>（{checkCount:prevState.checkCount+1，checkboxValid:true}））
否则{
this.setState（（prevState）=>（{checkCount:prevState.checkCount-1}），（）=>{
if（this.state.checkCount==0）
this.setState（{checkboxValid:false}）
})
}
}} />

---

如果用户选中或取消选中复选框，我们将把checkCount设置为+1或-1。如果他取消选中它，在更新checkCount之后，我们需要验证

this.state.checkCount==0

，以便在条件有效时将

checkboxValid

状态设置为false。

不要查询DOM。在父项的

状态中保留一个数组

，以存储复选框的状态。该状态将传递给每个复选框，传递的函数将更改父级的状态数组。这样，您可以随时读取复选框的状态。您可能应该实现

onChange

，并将复选框的状态保留在父组件中。这样，您就可以检查所选的项目是否符合您的标准。在React中，您几乎不应该求助于查询DOM，如果必须的话，您将使用

ref

而不是直接进行DOM查询。我假设它需要像在else条件下一样包装在arrow func中？无论哪种方式，它们似乎都不会更新任何值（checkCount或checkboxValid）的状态。我编辑了答案（忘记了一些

（）

：

{checkCount:prevState.checkCount-1}

=>

（{checkCount:prevState.checkCount-1}）

）。您可以在此处查看实时版本：