gpt4 book ai didi

reactjs - 在 React js 中将功能组件转换为类组件

转载 作者:行者123 更新时间:2023-12-05 02:08:44 26 4
gpt4 key购买 nike

在我的项目中,我使用了类组件而不是功能组件,因为我在每个网站上都获得了所有功能组件。你能帮我把功能组件转换成类组件吗?请帮助我默认选择提供多个链接所需的第一个值。

这是代码沙盒代码https://codesandbox.io/s/material-demo-dt504

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

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

export default function SimpleSelect() {
const classes = useStyles();
const [age, setAge] = React.useState('');

const inputLabel = React.useRef(null);
const [labelWidth, setLabelWidth] = React.useState(0);
React.useEffect(() => {
setLabelWidth(inputLabel.current.offsetWidth);
}, []);

const handleChange = event => {
setAge(event.target.value);
};

return (
<div>

<FormControl variant="outlined" className={classes.formControl}>
<InputLabel ref={inputLabel} id="demo-simple-select-outlined-label">
Age
</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={age}
onChange={handleChange}
labelWidth={labelWidth}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>

</div>
);
}

最佳答案

useState hook:初始状态在构造函数中赋给this.state,并在key-value状态更新中使用this.setState合并值对。

useEffect 钩子(Hook):依赖数组为空,大致等同于 componentDidMount 生命周期函数,所以把那个逻辑移到那里。

useRef 钩子(Hook):只需使用标准的 React ref。

useStyles hook:保持回调函数消费主题,使用withStyles HOC装饰器。

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

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

class SimpleSelect extends Component {
constructor(props) {
super(props);
this.state = {
age: "",
labelWidth: 0
};

this.inputLabel = createRef();
}

componentDidMount() {
this.setState({ labelWidth: this.inputLabel.current.offsetWidth });
}

handleChange = event => this.setState({ age: event.target.value });

render() {
const { age, labelWidth } = this.state;
const { classes } = this.props;
return (
<div>
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel
ref={this.inputLabel}
id="demo-simple-select-outlined-label"
>
Age
</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={age}
onChange={this.handleChange}
labelWidth={labelWidth}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
);
}
}

export default withStyles(useStyles)(SimpleSelect);

Edit Material demo

关于reactjs - 在 React js 中将功能组件转换为类组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60636396/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com