document.getElemetById возвращает TypeError: Невозможно установить свойство 'флажок' из неопределенного

Question

Я могу получить все переключатели в операторе if и манипулировать ими. Однако в блоке else он выдает «TypeError: Невозможно установить свойство« флажок »из неопределенного» * ​​1001 *

У меня есть форма для двух целей. Добавить и редактировать. Когда я использую форму для редактирования, она хранит значения из состояния. Я нахожу правильную радио-кнопку, чтобы проверить и проверить это Эта часть отлично работает. когда я использую форму для добавления новых данных, я обновляю состояние компонентов по событиям изменения. Иногда последний установленный переключатель остается отмеченным, и если я не переключаю его, я не могу получить данные переключателей. Еще одна часть кода - очистить все флажки переключателей. Но он выдает «TypeError: Невозможно установить свойство« флажок »из неопределенного» Я не знаю, если это из-за React. что не так с этим кодом?

if (formControl.buttonText === "Düzenle") {
    let correctAnswer = question.correctAnswer;
    let radioButtons = document.getElementsByName("cevap");
    for (let i = 0; i < 4; i++) {
      if (radioButtons[i].value === correctAnswer)
        radioButtons[i].checked = true;
    }
} 

else {
    let radioButtons = document.getElementsByName("cevap"); //it throws error here
    for (let i = 0; i < 4; i++) {
      radioButtons[i].checked = false;
    }
}

Вот полный код:

import React from "react";

const AddQuestion = ({
  formControl,
  question,
  handleView,
  handleChange,
  handleSubmit,
  handleQuestionDelete
}) => {
  //checks the radio button according to selected question for edit.
  if (formControl.buttonText === "Düzenle") {
    let correctAnswer = question.correctAnswer;
    let radioButtons = document.getElementsByName("cevap");
    for (let i = 0; i < 4; i++) {
      radioButtons[i].checked = radioButtons[i].value === correctAnswer;
    }
  } else {//unchecks the radio buttons for addinh new data.
    let radioButtons = document.getElementsByName("cevap");
    for (let i = 0; i < 4; i++) {
      radioButtons[i].checked = false;
    }
  }

  return (
    <div className="container">
      <button className={formControl.addQuestionButton} onClick={handleView}>
        Soru Ekle
      </button>
      <div className={formControl.visible}>
        <form>
          <div className="form-group">
            <label htmlFor="Textarea1">Konu Seçiniz.</label>
            <select
              className="form-control"
              id="topic"
              onChange={handleChange}
              value={question.topic}
            >
              <option value="">Seçiniz</option>
              <option value="tarih">Tarih</option>
              <option value="matematik">Matematik</option>
              <option value="cografya">Coğrafya</option>
            </select>
          </div>
          <div className="form-group inline-form">
            <label htmlFor="puan">Soru Puanı Giriniz.</label>
            <input
              type="number"
              step="5"
              id="point"
              className="form-control"
              placeholder="Puan"
              value={question.point}
              onChange={handleChange}
            />
          </div>
          <div className="form-group">
            <label htmlFor="Textarea1">Soruyu Giriniz.</label>
            <textarea
              className="form-control"
              id="questionText"
              rows="2"
              placeholder="Soruyu giriniz."
              value={question.questionText}
              onChange={handleChange}
            />
          </div>
          <label className="form-control">Seçenekleri Giriniz.</label>
          <div className="form-group inline-form">
            <div className="inline-form">
              <input
                type="text"
                id="answer1"
                className="form-control"
                placeholder="Seçenek 1"
                value={question.answer1}
                onChange={handleChange}
              />
            </div>
            <div className="inline-form">
              <label className="form-check-label" htmlFor="cevap">
                Doğru mu?
              </label>
              <input
                className="form-check-input"
                type="radio"
                name="cevap"
                id="correctAnswer"
                value="answer1"
                onChange={handleChange}
              />
            </div>
          </div>

          <div className="form-group inline-form">
            <div className="inline-form">
              <input
                type="text"
                id="answer2"
                className="form-control"
                placeholder="Seçenek 2"
                value={question.answer2}
                onChange={handleChange}
              />
            </div>
            <div className="inline-form">
              <label className="form-check-label" htmlFor="cevap">
                Doğru mu?
              </label>
              <input
                className="form-check-input"
                type="radio"
                name="cevap"
                id="correctAnswer"
                value="answer2"
                onChange={handleChange}
              />
            </div>
          </div>

          <div className="form-group inline-form">
            <div className="inline-form">
              <input
                type="text"
                id="answer3"
                className="form-control"
                placeholder="Seçenek 3"
                value={question.answer3}
                onChange={handleChange}
              />
            </div>
            <div className="inline-form">
              <label className="form-check-label" htmlFor="cevap">
                Doğru mu?
              </label>
              <input
                className="form-check-input"
                type="radio"
                name="cevap"
                id="correctAnswer"
                value="answer3"
                onChange={handleChange}
              />
            </div>
          </div>

          <div className="form-group inline-form">
            <div className="inline-form">
              <input
                type="text"
                id="answer4"
                className="form-control"
                placeholder="Seçenek 4"
                value={question.answer4}
                onChange={handleChange}
              />
            </div>
            <div className="inline-form">
              <label className="form-check-label" htmlFor="cevap">
                Doğru mu?
              </label>
              <input
                className="form-check-input"
                type="radio"
                name="cevap"
                id="correctAnswer"
                value="answer4"
                onChange={handleChange}
              />
            </div>
          </div>
        </form>
        <div className="inline-form">
          <button className="button" onClick={handleSubmit}>
            {formControl.buttonText}
          </button>
          <button
            className={formControl.deleteButton}
            onClick={() => {
              handleQuestionDelete(question.id);
            }}
          >
            Sil
          </button>
        </div>
      </div>
    </div>
  );
};

export default AddQuestion;

Answer 1

"RadioButtons" по какой-то причине пуст.Когда вы получаете элементы по имени, он не возвращает элементы.Если вы разместите HTML-код, причина будет угадываться.

В любом случае, вы можете проверить, что radioButtons не пусто, если хотите.

let radioButtons = document.getElementsByName("cevap");
if(radioButtons.length>0){
  for (let i = 0; i < radioButtons.length; i++) {
    radioButtons[i].checked = false;
  }
}

Если вы сделаете эту проверку, она перестанет выдавать ошибку.Но имейте в виду, что он также не установит флажок в значение false.Пока вы не узнаете, почему getElementsByName вернул пустые данные из вашего HTML-кода и решил эту проблему.

Answer 2

Я изменил код, как показано ниже. Я использовал radioButtons.length, как это было предложено, и это сработало. Я не знаю причину, но это сработало.

const radioButtons = document.getElementsByName("cevap");
  if (formControl.buttonText === "Gönder") {
    for (let i = 0; i < radioButtons.length; i++) {
      radioButtons[i].checked = false;
    }
  } else  {
    let correctAnswer = question.correctAnswer;
    for (let i = 0; i < radioButtons.length; i++) {
      radioButtons[i].checked = radioButtons[i].value === correctAnswer;
    }
}

Answer 3

Здесь вы можете немного упростить логику и просто назначить проверенное состояние, основываясь на результате сравнения значения и правильного ответа. Это можно сделать одним утверждением, но я использую троичное уравнение для демонстрации результатов каждого состояния.

Как указано в комментариях - предпочтительно динамически проверять длину массива, чтобы можно было добавлять или удалять элементы из массива, и код все равно будет работать.

if (formControl.buttonText === "Düzenle") {
    let correctAnswer = question.correctAnswer;
    let radioButtons = document.getElementsByName("cevap");
    for (let i = 0; i < radioButtons.length; i++) {
      radioButtons[i].value === correctAnswer
        ? radioButtons[i].checked = true
        : radioButtons[i].checked = false;
    }
}