Question

我可以在if语句中获取所有单选按钮并可以对其进行操作。但是，在else块中，它抛出“ TypeError：无法设置属性'checked'的未定义”

我有两个用途的表格。添加和编辑。当我使用表单进行编辑时，它将从状态中筛选出值。我找到了正确的单选按钮进行检查和检查。这部分工作正常。当我使用表单添加新数据时，我会通过change事件更新组件的状态。有时最后一个选中的单选按钮保持选中状态，如果我不进行切换，则无法获取单选按钮数据。该代码的其他部分是清除所有单选按钮检查。但是它抛出“ TypeError：无法设置未定义的属性'checked'”我不知道是否是由于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

您可以在这里稍微简化一下逻辑，而只需根据值和正确答案之间的比较结果来分配检查状态。这可以在一个语句中完成-但我正在使用一个三元方程式来演示每个状态的结果。

如评论中所述-最好动态检查数组的长度，以便您可以从数组中添加或删除项目，并且代码仍然可以使用。

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;
    }
}

Answer 2

由于某些原因，“ 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 3

我如下更改了代码。我按照建议使用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;
    }
}

document.getElemetById返回TypeError：无法设置未定义的属性“ checked”

3 个答案: