React中如何通过对象实现多个Checkbox复选框的独立状态变更

原代码问题说明 #

• 状态更新逻辑错误：原代码调用setChecked时直接传入布尔值，会将原本为对象类型的checked状态覆盖为布尔值，导致后续读取checked.box1、checked.box2的逻辑全部失效
• 第二个Checkbox绑定了错误的修改逻辑，点击第二个复选框只会修改box1的状态，无法控制自身状态

实现方案 #

最简修改版 #

直接修改每个Checkbox的点击事件，更新状态时保留原对象的其他属性，只修改对应字段的值：

export default function changeNextPaymentDate() {
  const classes = useStyles();

  const [checked, setChecked] = useState({
    box1 : true,
    box2 : true
  });

  return (
    <Grid container spacing={2}>
      <Grid item xs={3}>
        <Box className={classes.paper} fontWeight='bold'> Change next payment date </Box>
      </Grid>
      <Grid item xs={9}>
        <div style= {{ display:'flex'}}>
          <Checkbox
            checked = {checked.box1}
            onClick = {()=>{setChecked(prev => ({...prev, box1: !prev.box1}))}}
          />          
          <Checkbox
            checked = {checked.box2}
            onClick = {()=>{setChecked(prev => ({...prev, box2: !prev.box2}))}}
          />
          <Box className={classes.paper}>Change next payment date</Box>
        </div>        
        <Box className={classes.decStyle}>Change next payment functionallity descriptions  </Box>
      </Grid>
    </Grid>
  );
}

通用优化版 #

如果后续需要新增更多复选框，可以封装通用的状态更新函数，减少重复代码：

export default function changeNextPaymentDate() {
  const classes = useStyles();

  const [checked, setChecked] = useState({
    box1 : true,
    box2 : true
  });

  // 通用复选框状态更新函数
  const handleCheck = (boxKey) => {
    setChecked(prev => ({
      ...prev,
      [boxKey]: !prev[boxKey]
    }))
  }

  return (
    <Grid container spacing={2}>
      <Grid item xs={3}>
        <Box className={classes.paper} fontWeight='bold'> Change next payment date </Box>
      </Grid>
      <Grid item xs={9}>
        <div style= {{ display:'flex'}}>
          <Checkbox
            checked = {checked.box1}
            onClick = {()=> handleCheck('box1')}
          />          
          <Checkbox
            checked = {checked.box2}
            onClick = {()=> handleCheck('box2')}
          />
          <Box className={classes.paper}>Change next payment date</Box>
        </div>        
        <Box className={classes.decStyle}>Change next payment functionallity descriptions  </Box>
      </Grid>
    </Grid>
  );
}

核心原理 #

React的状态更新如果是引用类型（对象、数组），需要先拷贝原状态的所有属性，再修改对应字段的值，避免原状态的其他属性被覆盖丢失。

内容的提问来源于stack exchange，提问作者adnan159