javascript - 如何在 React 中使用 useState 检查复选框的更改值

Question

我会将带有属性的复选框字段列表传递给我的组件，我想根据用户是否选择更改 checked 属性的值，但我最多只能将检查数组中的值。

如何更改我所在州的这个特定 key ？

这是我的代码:

export default function Combocheck({ data, title, id }) {
  const inputLabel = React.useRef(null);

  const [state, setState] = React.useState({
    checkbox: data.map((element) => {
      element.checked = false;
      return element;
    })
  });

  const changeState = name => event => {
    const newValue = !state.checkbox[name].checked;
    setState({ checkbox: [
        ...state.checkbox,
        state.checkbox[name] = {
          ...state.checkbox[name],
          checked: newValue
        }
      ]
    });
  }

  console.log(state);

  return (
    <div> 
      <Typography color='textSecondary'>{title}</Typography>
      <Divider />
      <FormGroup>
        {state.checkbox.map(({code, description, checked}, i) => {
          return <FormControlLabel control={
            <Checkbox
              key={code}
              checked={checked}
              onChange={changeState(i)}
              value={code}
              color="primary"
            />
          }
          key={code}
          label={description}
          />
        })}
      </FormGroup>
    </div>
  );
}

可在此处查看或编辑:https://stackblitz.com/edit/react-irhqw9?file=Hello.js

Answer 1

每次更新状态时，您都会添加一个复选框项目!相反，请考虑映射您的元素并仅更改适用的元素:

const changeState = name => event => {
  setState({ 
    checkbox: state.checkbox.map((checkbox, i) => {
      return i !== name ? 
        checkbox : 
        { ...checkbox, checked: !checkbox.checked }
    }) 
  });
}

我也不太喜欢使用元素索引作为名称；我很确定您使用代码会很好(假设它是唯一的)，然后这不需要是高阶函数:

const changeState = event => {
  setState({ 
    checkbox: state.checkbox.map((checkbox) => {
      return event.target.value !== checkbox.code ? 
        checkbox : 
        { ...checkbox, checked: !checkbox.checked }
    }) 
  });
}

然后在 Checkbox 属性中:

onChange={changeState}