如何解决将材质ui中的选择组件从功能转换为类
我是新来的人,正在使用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中遇到问题。
您能告诉我该怎么做吗?
解决方法
假设您可以转换除类以外的东西。您可以使用实体样式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);
,
对于类组件,您可以使用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);
实时示例
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。