Reactjs 将基于材质UI react autosuggest functional转换为基于类组件

我正在使用Material UI react autosuggest制作我的应用程序。但这是基于函数的，我的代码是基于类组件的。因此，我想将该代码转换为基于类组件的代码。 如果有人告诉我如何将其转换为基于组件的，这将非常有帮助

import React from 'react';
import deburr from 'lodash/deburr';
import Autosuggest from 'react-autosuggest';
import match from 'autosuggest-highlight/match';
import parse from 'autosuggest-highlight/parse';
import TextField from '@material-ui/core/TextField';
import Paper from '@material-ui/core/Paper';
import MenuItem from '@material-ui/core/MenuItem';
import Popper from '@material-ui/core/Popper';
import { makeStyles } from '@material-ui/core/styles';

const suggestions = [
  { label: 'Afghanistan' },
  { label: 'Aland Islands' },
  { label: 'Albania' },
  { label: 'Algeria' },
  { label: 'American Samoa' },
  { label: 'Andorra' },
  { label: 'Angola' },
  { label: 'Anguilla' },
  { label: 'Antarctica' },
  { label: 'British Indian Ocean Territory' },
  { label: 'Brunei Darussalam' },
];

function renderInputComponent(inputProps) {
  const { classes, inputRef = () => {}, ref, ...other } = inputProps;

  return (
    <TextField
      fullWidth
      InputProps={{
        inputRef: node => {
          ref(node);
          inputRef(node);
        },
        classes: {
          input: classes.input,
        },
      }}
      {...other}
    />
  );
}

function renderSuggestion(suggestion, { query, isHighlighted }) {
  const matches = match(suggestion.label, query);
  const parts = parse(suggestion.label, matches);

  return (
    <MenuItem selected={isHighlighted} component="div">
      <div>
        {parts.map(part => (
          <span key={part.text} style={{ fontWeight: part.highlight ? 500 : 400 }}>
            {part.text}
          </span>
        ))}
      </div>
    </MenuItem>
  );
}

function getSuggestions(value) {
  const inputValue = deburr(value.trim()).toLowerCase();
  const inputLength = inputValue.length;
  let count = 0;

  return inputLength === 0
    ? []
    : suggestions.filter(suggestion => {
        const keep =
          count < 5 && suggestion.label.slice(0, inputLength).toLowerCase() === inputValue;

        if (keep) {
          count += 1;
        }

        return keep;
      });
}

function getSuggestionValue(suggestion) {
  return suggestion.label;
}

const useStyles = makeStyles(theme => ({
  root: {
    height: 250,
    flexGrow: 1,
  },
  container: {
    position: 'relative',
  },
  suggestionsContainerOpen: {
    position: 'absolute',
    zIndex: 1,
    marginTop: theme.spacing(1),
    left: 0,
    right: 0,
  },
  suggestion: {
    display: 'block',
  },
  suggestionsList: {
    margin: 0,
    padding: 0,
    listStyleType: 'none',
  },
  divider: {
    height: theme.spacing(2),
  },
}));

export default function IntegrationAutosuggest() {
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = React.useState(null);
  const [state, setState] = React.useState({
    single: '',
    popper: '',
  });

  const [stateSuggestions, setSuggestions] = React.useState([]);

  const handleSuggestionsFetchRequested = ({ value }) => {
    setSuggestions(getSuggestions(value));
  };

  const handleSuggestionsClearRequested = () => {
    setSuggestions([]);
  };

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

  const autosuggestProps = {
    renderInputComponent,
    suggestions: stateSuggestions,
    onSuggestionsFetchRequested: handleSuggestionsFetchRequested,
    onSuggestionsClearRequested: handleSuggestionsClearRequested,
    getSuggestionValue,
    renderSuggestion,
  };

  return (
    <div className={classes.root}>
      <Autosuggest
        {...autosuggestProps}
        inputProps={{
          classes,
          id: 'react-autosuggest-simple',
          label: 'Country',
          placeholder: 'Search a country (start with a)',
          value: state.single,
          onChange: handleChange('single'),
        }}
        theme={{
          container: classes.container,
          suggestionsContainerOpen: classes.suggestionsContainerOpen,
          suggestionsList: classes.suggestionsList,
          suggestion: classes.suggestion,
        }}
        renderSuggestionsContainer={options => (
          <Paper {...options.containerProps} square>
            {options.children}
          </Paper>
        )}
      />
    </div>
  );
}

从“React”导入React；
从“lodash/去毛刺”导入去毛刺；
从“react Autosuggest”导入Autosuggest；
从“自动建议突出显示/匹配”导入匹配；
从“自动建议突出显示/分析”导入分析；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/core/Popper”导入Popper；
从'@material ui/core/styles'导入{makeStyles}；
常数建议=[
{标签：“阿富汗”}，
{标签：“阿兰群岛”}，
{标签：'阿尔巴尼亚'}，
{标签：'阿尔及利亚'}，
{标签：“美属萨摩亚”}，
{标签：'安道尔'}，
{标签：'安哥拉'}，
{标签：“安圭拉”}，
{标签：'南极洲'}，
{标签：'英属印度洋领土'}，
{标签：“文莱达鲁萨兰国”}，
];
函数renderInputComponent（inputProps）{
const{classes，inputRef=（）=>{}，ref，…other}=inputProps；
返回(
{
ref（节点）；
inputRef（节点）；
},
课程：{
输入：classes.input，
},
}}
{…其他}
/>
);
}
函数renderSuggestion（建议，{query，ishighlight}）{
const matches=match（suggestion.label，查询）；
const parts=parse（suggestion.label，匹配项）；
返回(
{parts.map（part=>(
{part.text}
))}
);
}
函数getSuggestions（值）{
const inputValue=去毛刺（value.trim（））.toLowerCase（）；
常量inputLength=inputValue.length；
让计数=0；
返回inputLength==0
? []
：suggestions.filter（suggestion=>{
恒速保持=
计数<5&&suggestion.label.slice（0，inputLength）.toLowerCase（）==inputValue；
如果（保留）{
计数+=1；
}
返回保持；
});
}
函数getSuggestionValue（建议）{
退货建议.标签；
}
const useStyles=makeStyles（主题=>({
根目录：{
身高：250，
flexGrow:1，
},
容器：{
位置：'相对'，
},
建议容器打开：{
位置：'绝对'，
zIndex:1，
marginTop：主题。间距（1），
左:0,，
右:0,，
},
建议:{
显示：“块”，
},
建议列表：{
保证金：0，
填充：0，
listStyleType:“无”，
},
分隔器：{
高度：主题。间距（2），
},
}));
导出默认函数集成AutoSuggest（）{
const classes=useStyles（）；
常量[anchorEl，setAnchorEl]=React.useState（null）；
常量[状态，设置状态]=React.useState({
单一：''，
波普尔：“，
});
const[stateSuggestions，setSuggestions]=React.useState（[]）；
const handleSuggestionFetchRequested=（{value}）=>{
设置建议（获取建议（值））；
};
const handleSuggestionsClearRequested=（）=>{
设置建议（[]）；
};
const handleChange=name=>（事件，{newValue}）=>{
设定状态({
……国家，
[名称]：newValue，
});
};
常量autosuggestProps={
RenderInput组件，
建议：国家建议，
OnSuggestionFetchRequested:HandleSuggestionFetchRequested，
OnSuggestionClearRequested:HandleSuggestionClearRequested，
getSuggestionValue，
渲染建议，
};
返回(
(
{options.children}
)}
/>
);
}

这有点紧急。如果你有什么事情要做，请告诉我。

最简单的答案

const Header = (props)=>{
    return  <h1>I am header Component</h1>; 
}
export default Header;

const头=（道具）=>{
返回我是标题组件；
}
导出默认标题；

如果您希望使用ES6格式，相同的代码将变为

class Header extends React.Component{
    constructor(props){
        super(props); 
        this.state = {
            // your state 
        }
    }

    render(){
        return (
            <h1>I am header Component</h1>
        );
    }

}
export default Header;

类头扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
//你的州
}
}
render（）{
返回(
我是头组件
);
}
}
导出默认标题；

有关详细信息，请参阅本手册