为什么React重新渲染过程不会改变checkbox的值？

Question

我刚刚用 onChange 事件处理程序创建了一个输入框，并且有一个复选框。我将复选框单击为 true，然后在输入框中键入，该输入框将重新渲染组件，因为它具有 useState 挂钩...但是当重新渲染发生时，为什么不做出反应，只显示具有 false 值的复选框，而是显示以前的状态（这是真的）？？？

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("");

  function handleChange(event) {
    setName(event.target.value);
  }

  return (
    <div>
      <input
        type="text"
        onChange={handleChange}
        placeholder="Enter a value"
        value={name}
      />
      <label>RADIO2</label>
      <input type="checkbox" />
      {console.log(name)}
    </div>
  );
}

export default App;

我只是想了解这种重新渲染的反应行为。

Answer 1

您需要管理复选框的状态：

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("");
  const [isChecked, setIsChecked] = useState(false);

  function handleChange(event) {
    setName(event.target.value);
  }

  function handleCheckboxChange(event) {
    setIsChecked(event.target.checked);
  }

  return (
    <div>
      <input
        type="text"
        onChange={handleChange}
        placeholder="Enter a value"
        value={name}
      />
      <label>RADIO2</label>
      <input
        type="checkbox"
        checked={isChecked}
        onChange={handleCheckboxChange}
      />
      {console.log(name)}
    </div>
  );
}

export default App;