В React как проверить, был ли установлен хотя бы один флажок

Question

Я написал компонент Checkbox с React, который повторно используется для создания списка флажков. Я знаю, что реагирующий элемент отличается от DOM с точки зрения состояния. Но как я могу проверить, был ли хотя бы один флажок выбран пользователем при отправке формы в React?

Я искал в SO и Google, но все примеры либо в jQuery, либо в ванильном JS. Для моего случая я хочу React пример.

1010 * компонент * const Checkbox = ({ title, options, id, name, onChange }) => { return ( <div className="checkbox-group"> <h4>{title}</h4> {options.map(option => ( <label htmlFor={`${name}-${index}`} key={`${name}-${index}`}> <input type="checkbox" name={name} value={option} onChange={onChange} id={`${name}-${index}`} /> <span> {option}</span> </label> ))} </div> ); }; class Form extends Component { ... handleChange(event) { let newSelection = event.target.value; let newSelectionArray; newSelectionArray = [ ...this.state.sureveyResponses.newAnswers, newSelection, ]; this.setState(prevState => { return { surveyResponse: { ...this.state.surveyResponse, newAnswers: newSelectionArray, } ) } handleSubmit() { // I'm guessing this doesn't work in React as it's using its own state! let checkboxes = document.querySelectorAll('[name="quiz-0"]:checked'); for (let chk in checkboxes) { if (chk.checked) { return true; } } alert('Please choose at least one answer.'); return false; } render() { return ( <form onSubmit={this.handleSubmit}> <h4>Choose</> {this.state.surveyQuiz.map((quiz, index) => { return ( <div key={index}> <Checkbox title={quiz.question} options={quiz.answers} name={`quiz-${index + 1}`} onChange={this.handleChange} /> </div> ); })}; <button>Save answer(s)</span> </form> ); } } Когда пользователь отправляет форму, он должен проверить, установлен ли хотя бы флажок, если не установлен ни один, тогда запретить отправку формы, то есть вернуть false!

Answer 1

Вам также следует поддерживать свойство checked в состоянии surveyResponse.newAnswers.Затем вы сможете проверить, является ли какой-либо из них true.Например:

1005

Предполагаемый пример newAnswers данные:

[
  {answer:'foo', checked: false},
  {answer:'bar', checked: true},
  ...
]

Answer 2

Ниже показано, как изменить свой handleSubmit для чтения данных формы:

handleSubmit(event) {
    event.preventDefault();
    const form = event.target;
    const data = new FormData(form);
    for (let name of data.keys()) {
      const input = form.elements[name];
      console.log(input);
      console.log('value:', input.value);
    }
}