Блог

В настоящее время я работаю над формой с флажками, которая должна быть проверена с помощью react JS. Мне нужно, чтобы он показывал сообщение об ошибке «Пожалуйста, установите по крайней мере 2 флажка», если установлено менее 2 флажков. Я пробовал использовать условие if, но оно не работает. Я ссылался на множество веб-сайтов, но не смог найти правильного решения. Пожалуйста, помогите мне.

МОЙ КОД:

 class App extends React.Component {
  state = {
    checkbox: "",
    checkboxValid: false,
    errorMsg: {},
  };

  validateForm = () => {
    const { checkboxValid } = this.state;
    this.setState({
      formValid: checkboxValid,
    });
  };

  updateCheckbox = (checkbox) => {
    this.setState({ checkbox }, this.validateCheckbox);
  };

  validateCheckbox = () => {
    const { checkbox } = this.state;
    let checkboxValid = true;
    let errorMsg = { ...this.state.errorMsg };
    if (checkbox.checked < 2) {
      checkboxValid = false;
      errorMsg.checkbox = "Please select atleast 2 checkbox";
    }
    this.setState({ checkboxValid, errorMsg }, this.validateForm);
  };

  render() {
    return (
      <div>
        <label htmlFor="checkbox">checkbox</label>
        <ValidationMessage
          valid={this.state.checkboxValid}
          message={this.state.errorMsg.checkbox}
        />
        <input
          type="checkbox"
          onChange={(e) => this.updateCheckbox(e.target.value)}
        />
        Sports
        <br></br>
        <input
          type="checkbox"
          onChange={(e) => this.updateCheckbox(e.target.value)}
        />
        Business
        <br></br>
        <input
          type="checkbox"
          onChange={(e) => this.updateCheckbox(e.target.value)}
        />
        Health
        <br></br>
        <input
          type="checkbox"
          onChange={(e) => this.updateCheckbox(e.target.value)}
        />
        Society
        <br></br>
        <div>
          <button
            className="button"
            type="submit"
            disabled={!this.state.formValid}
          >
            Submit
          </button>
        </div>
      </div>
    );
  }
}
 

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

   state = {
    checkbox: "",
    checkboxValid: false,
    errorMsg: {},
    selectedCheckBox: 0
  };
 

Логика обновления:-

 updateCheckbox = ({ name, checked }) => {
    this.setState(
      (prev) => ({
        checkbox: checked,
        selectedCheckBox: checked
          ? prev.selectedCheckBox   1
          : prev.selectedCheckBox - 1
      }),
      this.validateCheckbox
    );
  };
 

Используйте selectedCheckBox счетчик в состоянии для проверки

Завершенный код:-

 import React from "react";
import "./styles.css";

export default class App extends React.Component {
  state = {
    checkbox: "",
    checkboxValid: false,
    errorMsg: {},
    selectedCheckBox: 0
  };

  validateForm = () => {
    const { checkboxValid } = this.state;
    this.setState({
      formValid: checkboxValid
    });
  };

  updateCheckbox = ({ name, checked }) => {
    this.setState(
      (prev) => ({
        checkbox: checked,
        selectedCheckBox: checked
          ? prev.selectedCheckBox   1
          : prev.selectedCheckBox - 1
      }),
      this.validateCheckbox
    );
  };

  validateCheckbox = () => {
    const { checkbox } = this.state;
    let checkboxValid = true;
    let errorMsg = { ...this.state.errorMsg };
    if (this.state.selectedCheckBox < 2) {
      checkboxValid = false;
      errorMsg.checkbox = "Please select atleast 2 checkbox";
    }
    this.setState({ checkboxValid, errorMsg }, this.validateForm);
  };

  render() {
    return (
      <div>
        <label htmlFor="checkbox">checkbox</label>
        {/* <ValidationMessage
          valid={this.state.checkboxValid}
          message={this.state.errorMsg.checkbox}
        /> */}
        <input
          type="checkbox"
          name="business"
          onChange={(e) => this.updateCheckbox(e.target)}
        />
        Sports
        <br></br>
        <input
          type="checkbox"
          name="health"
          onChange={(e) => this.updateCheckbox(e.target)}
        />
        Business
        <br></br>
        <input
          type="checkbox"
          name="society"
          onChange={(e) => this.updateCheckbox(e.target)}
        />
        Health
        <br></br>
        <input
          type="checkbox"
          onChange={(e) => this.updateCheckbox(e.target)}
        />
        Society
        <br></br>
        <div>
          <button
            className="button"
            type="submit"
            disabled={!this.state.formValid}
          >
            Submit
          </button>
          <br />
          <b style={{ fontSize: "30px" }}>{this.state.selectedCheckBox}</b>
        </div>
      </div>
    );
  }
}
 

Рабочая демонстрация — https://codesandbox.io/s/frosty-colden-8hdm4?file=/src/App.js:0-2160

Один из способов решить эту проблему — установить разное состояние для каждого флажка. Задайте имя для каждого флажка, чтобы к нему можно было получить доступ e.target.name

Обратите внимание, что имя ввода совпадает с состоянием.

   state = {
    checkbox1: false,
    checkbox2: false,
    checkboxValid: false,
  };

  updateCheckbox = (e) => {
    this.setState({ e.target.name: e.target.checked });
  };

  if(this.state.checkbox1 amp;amp; this.state.checkbox2) {
    //both are checked!
  }

 

измените ввод на

 <input
   name="checkbox1"
   type="checkbox"
   onChange={this.updateCheckbox}
   checked={this.state.checkbox1}
/>