将材质ui中的选择组件从功能转换为类

Question

我是新来的人，正在使用material-ui的选择按钮。我正在尝试使用选择组件，但正在使用类组件。物料用户界面页面中的代码给出以下信息：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import NativeSelect from '@material-ui/core/NativeSelect';

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
}));

export default function NativeSelects() {
  const classes = useStyles();
  const [state, setState] = React.useState({
    age: '',
    name: 'hai',
  });

  const handleChange = (event) => {
    const name = event.target.name;
    setState({
      ...state,
      [name]: event.target.value,
    });
  };

  return (
    <div>
      <FormControl className={classes.formControl}>
        <InputLabel htmlFor="age-native-simple">Age</InputLabel>
        <Select
          native
          value={state.age}
          onChange={handleChange}
          inputProps={{
            name: 'age',
            id: 'age-native-simple',
          }}
        >
          <option aria-label="None" value="" />
          <option value={10}>Ten</option>
          <option value={20}>Twenty</option>
          <option value={30}>Thirty</option>
        </Select>
      </FormControl>

如何将其转换为类组件。我在classes.formControl中遇到问题。

您能告诉我该怎么做吗？

Answer 1

假设您可以转换除类以外的东西。您可以使用实体样式hoc API。对于您的情况，withTheme就足够了。这是更多reference

代码：

import React from "react";
import { withTheme } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import FormHelperText from "@material-ui/core/FormHelperText";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import NativeSelect from "@material-ui/core/NativeSelect";

class NativeSelects extends React.Component {
  render() {
    const classes = {
      formControl: {
        margin: this.props.theme.spacing(1),
        minWidth: 120,
      },
      selectEmpty: {
        marginTop: this.props.theme.spacing(2),
      },
    };
    return (
      <FormControl className={classes.formControl}>
        <InputLabel htmlFor='age-native-simple'>Age</InputLabel>
        <Select
          native
          value={state.age}
          onChange={handleChange}
          inputProps={{
            name: "age",
            id: "age-native-simple",
          }}
        >
          <option aria-label='None' value='' />
          <option value={10}>Ten</option>
          <option value={20}>Twenty</option>
          <option value={30}>Thirty</option>
        </Select>
      </FormControl>
    );
  }
}

export default withTheme(NativeSelects);

Answer 2

对于类组件，您可以使用withStyles代替makeStyles

import React from "react";
import InputLabel from "@material-ui/core/InputLabel";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import { withStyles } from "@material-ui/styles";

class NativeSelectsClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      age: "",
      name: "hai"
    };
  }

  render() {
    const { classes } = this.props;
    const handleChange = (event) => {
      const name = event.target.name;
      this.setState({
        ...this.state,
        [name]: event.target.value
      });
    };

    return (
      <div>
        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="age-native-simple">Age</InputLabel>
          <Select
            native
            value={this.state.age}
            onChange={handleChange}
            inputProps={{
              name: "age",
              id: "age-native-simple"
            }}
          >
            <option aria-label="None" value="" />
            <option value={10}>Ten</option>
            <option value={20}>Twenty</option>
            <option value={30}>Thirty</option>
          </Select>
        </FormControl>
      </div>
    );
  }
}

const styles = (theme) => {
  return {
    formControl: {
      margin: theme.spacing(1),
      minWidth: 120
    },
    selectEmpty: {
      marginTop: theme.spacing(2)
    }
  };
};

export default withStyles(styles)(NativeSelectsClass);

实时示例