材质UI核心多项选择

Question

我是新来的反应和物质ui核心。我在文档中遇到的问题是它使用函数来初始化常量，例如https://material-ui.com/components/selects/

但是我对类扩展组件使用react

出口类部门扩展了组件{

因此它给出了对常量的无效钩子调用。

有人可以帮我举一个如何在材料ui核心中使用多选的代码示例。使用类扩展组件。

代码如下：

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
    maxWidth: 300
  },
  root: {
    width: "100%",
    maxWidth: 500
  },
  chips: {
    display: "flex",
    flexWrap: "wrap"
  },
  chip: {
    margin: 2
  },
  noLabel: {
    marginTop: theme.spacing(3)
  }
}));

export class Departments extends Component {
  handleChangeField = (event, key, values1) => {
    this.setState({ values1 });
  };

  selectionRenderer = values1 => {
    // change the default comma separated rendering
    return <span style={{ color: "#ff4081" }}>{values1.join("; ")}</span>;
  };

  continue = e => {
    e.preventDefault();
    this.props.nextStep();
  };
  back = e => {
    e.preventDefault();
    this.props.prevStep();
  };

  render() {
    const { values, handleChange } = this.props;

    const {
      values: {
        Title,
        Details,
        What,
        Why,
        How,
        Status,
        Cost,
        Benefits,
        Kpi_Before,
        Kpi_After,
        UOM_Before,
        UOM_After,
        Base_After,
        Target_After,
        dateTime_After,
        Base_Before,
        Target_Before,
        Time,
        dateTime,
        departments
      }
    } = this.props;

    return (
      <MuiThemeProvider theme={theme}>
        <React.Fragment>
          <div className={useStyles.root}>
            <AppBar position="static">
              <Toolbar>
                <Typography
                  gutterBottom
                  align="center"
                  style={{ width: "100%", alignItems: "center" }}
                >
                  Select Departments
                </Typography>
              </Toolbar>
            </AppBar>
          </div>
          <br />
          <br />
          <FormControl style={{ width: "80%" }} size="small"></FormControl>

          <br />
          <br />
          <Grid
            container
            direction="row"
            justify="left"
            alignItems="left"
            style={{ marginLeft: "5%" }}
          >
            <Button
              variant="contained"
              color="primary"
              size="small"
              onClick={this.continue}
              style={{ marginLeft: "10%" }}
              style={styles.button}
            >
              Continue
            </Button>
            <Button
              variant="contained"
              color="default"
              size="small"
              style={styles.button}
              onClick={this.back}
            >
              Back
            </Button>
          </Grid>
        </React.Fragment>
      </MuiThemeProvider>
    );
  }
}

const theme = createMuiTheme({
  palette: {
    primary: blue,
    secondary: purple
  },
  status: {
    danger: "orange"
  }
});

const styles = {
  button: {
    margin: 5,
    verticalAlign: "bottom"
  }
};

export default Departments;