复选框不会在重新渲染时自行重置

如何解决复选框不会在重新渲染时自行重置

我有一个select下拉菜单，选择了一个项目后，出现一个复选框，我的问题是，例如，如果我选择“ Robot1”并选中它的复选框，但是我决定选择“ Robot2” ”，当我这样做时，复选框保持选中状态。我尝试为复选框添加一个状态（虽然我不认为这是必需的，因为setSelectedRobot被触发并且无论如何都会触发重新渲染……？！），我也尝试使用{{ 1}}丙和checked丙，但我不能得到选择了不同选项时复选框以本身复位。

defaultChecked

解决方法

您可以尝试此操作，删除选中状态。在复选框上，当事件发生时，您将获取当前的selectedRobot并设置其someBoolean字段值。

function Component() {
  const [selectedRobot,setSelectedRobot] = useState({});

  return (
    <>
      <select onChange={(e) => { 
          const robot = robots.find(robot => robot.name === e.target.value);
          setSelectedRobot(robot)
      >
        <option>Choose a robot:</option>
        {robots.map(robot => 
           <option key={robot.name} value={robot.name}>{robot.name}</option>
        )} 
      </select>

      {Object.keys(selectedRobot).length > 0 && (
        <input checked={selectedRobot ? selectedRobot.someBoolean : false} 
               type="checkbox" 
               onChange={(e) => {
                 setSelectedRobot(robot => ({...robot,someBoolean: e.target.checked}))
               }
        />)
    </>
  )
}

,

只需添加一个反应键时选择一个新的机器人改变所述输入。当密钥更改时，react将安装一个新元素。

function MyComponent() {
  const [selectedRobot,setSelectedRobot] = useState({});

  return (
    <>
      <select
        onChange={(e) => {
          const robot = robots.find((robot) => robot.name === e.target.value);
          setSelectedRobot(robot);
        }}
      >
        <option>Choose a robot:</option>
        {robots.map((robot) => (
          <option key={robot.name} value={robot.name}>
            {robot.name}
          </option>
        ))}
      </select>

      {Object.keys(selectedRobot).length > 0 && (
        <input
          key={selectedRobot.name} // <-- use robot name as key
          type="checkbox"
        />
      )}
    </>
  );
}

如果您想保持选中状态，只需在选择新机器人时将checked状态重置为false。

<select
  onChange={(e) => {
    const robot = robots.find((robot) => robot.name === e.target.value);
    setSelectedRobot(robot);
    setChecked(false);
  }}
>