温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - Determine when at least one checkbox is checked in ReactJS
dom forms javascript reactjs validation

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

发布于 2020-03-29 21:57:26

我想确定何时在React中至少选中一个复选框。

我有一个Checkbox组件:

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>
  ));

我遇到的问题是,选中任何一个复选框时运行的功能isCheckboxChecked(),一旦选中一个字段,如果我取消选中该字段(或选中一堆,然后全部取消选中它们),它将永远无法运行返回为假。

有没有一种更好的方法来检查是否在React中至少选中了一个复选框而不查询DOM(这似乎无法与React渲染的复选框一起正常工作)?

查看更多

提问者
TWLATL
被浏览
59
TBouder 2020-01-31 19:57

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

  <input 
    type="checkbox" 
    name={this.props.value} 
    value={this.props.value} 
    onChange={this.props.onChange} />
constructor(props) {
  super(props);
  this.state = {checkCount: 0}
}

<Checkbox
   value={obj.value}
   title={obj.title}
   onChange={(e) => {
     if (e.target.checked)
       this.setState((prevState) => ({checkCount: prevState.checkCount + 1, checkboxValid: true}))
     else {
       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。