Определите, когда хотя бы один флажок установлен в ReactJS - PullRequest
Новая
       6

Определите, когда хотя бы один флажок установлен в ReactJS

0 голосов
/ 31 января 2020

Я пытаюсь определить, когда хотя бы один флажок установлен в 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)?

1 Ответ

1 голос
/ 31 января 2020

Вы должны сохранить счетчик установленного флажка 

  <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, если условие действительно.

...