Material UI in React [ Day 8 ] Inputs(Checkbox) 多选

现在就让我们回到Inputs的部分继续讲解，今天会讲解表单中常用的多选(checkbox)的作法。

Checkbox

大家可以搭配官方文件一起使用，如果列表中出现多个选项，则可以使用复选框(checkbox)而不是开/关(switch)来节省空间。如果您只有一个选项，请避免使用复选框(checkbox)并改用开/关(switch)。

// in export function
  const [checked, setChecked] = React.useState(true);
  const handleChange = (event) => {
    setChecked(event.target.checked);
  };

<Checkbox
  checked={checked}
  onChange={handleChange}
  inputProps={{
    "aria-label": "controlled Checkbox color 预设值是secondary的颜色"
  }}
/>
<Checkbox
  defaultChecked
  color="primary"
  inputProps={{ "aria-label": "primary color Checkbox" }}
/>
<Checkbox inputProps={{ "aria-label": "uncontrolled-checkbox" }} />
<Checkbox disabled inputProps={{ "aria-label": "disabled checkbox" }} />
<Checkbox
  disabled
  checked
  inputProps={{ "aria-label": "disabled checked checkbox" }}
/>
<Checkbox
  defaultChecked
  indeterminate
  inputProps={{ "aria-label": "indeterminate checkbox" }}
/>
<Checkbox
  defaultChecked
  color="default"
  inputProps={{ "aria-label": "checkbox with default color" }}
/>
<Checkbox
  defaultChecked
  size="small"
  icon={<FavoriteBorder />}
  checkedIcon={<Favorite />}
  inputProps={{ "aria-label": "checkbox 更换 size 和 Icon 样式" }}
/>

透过 FormControlLabel 控制 Checkbox，并整合 label 进同一个组件中:

<FormControlLabel control={<Checkbox name="checkedC" />} label="Uncontrolled" />

详细的话可以参考官方文件的范例，关於FormControlLabel它能控制Checkbox, Switch, Radio 这三个组件并赋予标签。
也可以透过以下方式更改为其他使用方式

const useStyles = makeStyles({
  greenBtn: {
    minWidth: 100,
    background: lightGreen[200],
    borderRadius: 10,
    padding: 4,
    "& :hover":{
      color: lightGreen[900],
    },
  },
  checked: {
    background: pink[300],
  },
});
export default const App = () => {
  const classes = useStyles();
  const [ checked, setChecked ] = React.useState(faulse);
  return (
    <div>
      <FormControlLabel
        control={<Checkbox style={{ display: 'none'}}/>}
        label="替换按钮"
        labelPlacement="top"
        checked={checked}
        onChange={e => setChecked(e.target.checked)}
        className={`${classes.greenBtn} ${checked && classes.checked}`}
      />
    </div>
  );
}

使用FormGroup控制多个Checkbox:

// in function export
const [state, setState] = React.useState({
  gilad: true,
  jason: false,
  antoine: false,
});

const handleChange = (event) => {
  setState({ ...state, [event.target.name]: event.target.checked });
};
const { gilad, jason, antoine } = state;
const error = [gilad, jason, antoine].filter((v) => v).length !== 2;

// in return
<FormControl required error={error} component="fieldset" >
  <FormLabel component="legend">Pick two</FormLabel>
    <FormGroup>
      <FormControlLabel
        control={
          <Checkbox
            checked={gilad}
            onChange={handleChange}
            name="gilad"
          />
        }
        label="Gilad Gray"
      />
      <FormControlLabel
        control={
          <Checkbox
            checked={jason}
            onChange={handleChange}
            name="jason"
          />
        }
        label="Jason Killian"
      />
      <FormControlLabel
        control={
          <Checkbox
            checked={antoine}
            onChange={handleChange}
            name="antoine"
          />
        }
        label="Antoine Llorca"
      />
    </FormGroup>
  <FormHelperText>You can display an error</FormHelperText>
</FormControl>

错误的部分可以考虑搭配formik或是react-hook-form来做检核使用，之後有机会再示范material ui + react-hook-form的用法，那麽今天的内容就先到这里，明天将讲解单选框(Radio)的部分，附上今天的source code example。