Question

我正在使用 react 打字稿中的复选框。我正在处理 onChange 事件，但它无法正常工作。父组件的代码 -

import { myCheckboxData } from "./constant";

export const ParentComponent = (props: Test) => {
  const myCheckboxDataAPI = myCheckboxData!.map((data) => Object.assign({}, data));
  const initialData: InterfaceA = {
    myType: myCheckboxDataAPI!,
  };
  const [myInitialState, setMyInitialState] = React.useState(initialData);

  const onChange = (type: string, selectedValue: boolean) => {
    const index: number = myCheckboxDataAPI!.findIndex((x) => x.label === selectType);
    if (index > -1) {
      myCheckboxDataAPI![index].checked = !selectedValue;
      setMyInitialState({
        ...myInitialState,
        myType: myCheckboxDataAPI,
      });
    }
  };
  return <FirstChild onChange={onChange} checkboxData={myInitialState} />;
};

FirstChild 组件的代码 -

import react from "react";

interface Test1 {
  checkboxData: Array<ICheckboxProps>;
  onChange: (type: string, value: boolean) => void;
}

export const FirstChild = (props: Test1) => {
  return (
    <Grid container wrap='nowrap'>
      {myData.map((item) => {
        return (
          <div key={`new_${item.label}`}>
            <Checkbox
              id={`new_${item.label}`}
              checked={item.checked}
              label={item.label}
              onChange={(event: React.ChangeEvent<HTMLInputElement>): void => {
                onChange(String(item.label), item.checked);
              }}
            />
          </div>
        );
      })}
    </Grid>
  );
};

myCheckboxData 中有 2 个值。我可以一一选择这两个值。我还可以选择/取消选择特定值。但是，如果我想取消选择这两个值，则它不起作用。我怎样才能让它完美运行？

如何在反应打字稿中选择/取消选择复选框？

0 个答案: