如何在类中编写handleClick而不是在react js中导出默认函数

Question

I'm new In react and I want to use material UI in my project, I read the doc of the menu part like this , but I can't write my code, my problem is how to convert the export default function to class PageHeader extends React.Component{} for this part

    const ITEM_HEIGHT = 100;
    const [anchorEl, setAnchorEl] = React.useState(null);
    const open = Boolean(anchorEl);
    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };

Answer 1

The example you linked uses function components. We can convert these to more traditional class components like what you want, or you can use the function as a component - the example is able to use <LongMenu /> because it is a component, just declared using a function instead of a class. There is information about converting a function component to a class in the React docs .

Some of the key points when using a class instead of a function is hooks like useState and useEffect don't really exist in a class. Instead, we store the state as a field in the class, and use lifecycle methods . A class for the snippet you provided could look like:

class PageHeader extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      anchorEl: null
    };
  }

  handleClick = event => {
    this.setState({ anchorEl: event.currentTarget });
  }

  handleClose = () => {
    this.setState({ anchorEl: null });
  }

  render() {
    return (...);
  }
}

export default PageHeader;

Instead of using the useState hook, we can store the state of anchorEl in this.state , and update it with this.setState .