javascript - 如何在反应时控制输入标签中的 defaultChecked？

Question

如何在反应时控制输入标签中的初始 defaultChecked？

我是韩国人，想成为前端工程师。我不擅长使用英语。我有一个问题要反应。

我制作了调查页面，并且有一些选项可供选择。然后我想在调查页面上进行修改功能。所以，我可以呈现另一个输入标签值，但我不能呈现将是 defaultChecked 值的选项值。

我这样设置defaultChecked={checkedValue} ，const [checkedValue, setCheckedValue] = useState(false) 然后我可以从数据库中接收值。从下面看，价值是从数据库调查数据之前的期权价值。

所以我想说

• 当我单击编辑按钮时，我想从收到的数据库数据中显示选项值，然后我想控制 defaultChecked 值是真还是假。

请帮我。

感谢您阅读这篇英语不好的文章。

const EditSurveyForm = ({ data, handleClick, name }) => {
  const getToken = window.sessionStorage.getItem("token");
  const [value, getValue] = useState("");
  const [checkValue1, getCheckValue1] = useState(false);
  const [checkValue2, getCheckValue2] = useState(false);

  useEffect(() => {
    const ac = new AbortController();
    axios
      .get(`http://localhost:5000/content/${contentId}`, {
        headers: { "x-access-token": getToken },
      })
      .then(res => {
        if (res.data.Content) {
          getValue(res.data.Content[name]);
          handleOption();
        }
      });
  }, [value]);

  const handleOption = () => {
    if (value === 1) {
      getCheckValue1(true);
    }
    if (value === 2) {
      getCheckValue2(true);
    }
  };

  return (
    <>
      <Container>
        <div className={data.name}>{data.data}</div>
        <SurveyContainer>
          <span>
            약1
            <div>
              <input
                defaultChecked={checkValue1}
                type="radio"
                name={`question${data.id}`}
                value="1"
                onClick={e => handleClick(data.name, e.target.value)}
                className="option1"
              />
            </div>
          </span>
          <span>
            <br></br>
            <div>
              <input
                defaultChecked={checkValue2}
                type="radio"
                name={`question${data.id}`}
                value="2"
                onClick={e => handleClick(data.name, e.target.value)}
                className="option2"
              />
            </div>
          </span>
        </SurveyContainer>
      </Container>
    </>
  );
};

export default EditSurveyForm;

请帮我。谢谢你。

标签： javascriptreactjs