Проверка флажка с помощью React JS

В настоящее время я работаю над формой с флажками, которые должны быть проверены с помощью 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>
    );
  }
}

Вы обновляете одно и то же значение checkbox в своем состоянии для каждого флажка. Вместо этого вы могли бы checkbox быть объектом, и каждый из ваших флажков переключал свойство этого объекта, а затем проверять, сколько свойств true при их проверке.

— 22.12.2020 06:25

Установите выбранное количество флажков в состоянии и используйте количество для проверки

— 22.12.2020 06:27

reactjs validation

22.12.2020 06:14

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

9 143

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

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

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

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

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

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

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

22.12.2020 06:29

Ответ принят как подходящий

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

  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

22.12.2020 06:41