Question

单击按钮时出现事件错误，问题是我不知道如何使用钩子将其转换

const Header = () => {
  const [value, setValue] = React.useState(0);

  function handleChange(event, newValue) {
    setValue(newValue);
  }

  function onLogoutClick(e) {
    e.preventDefault();
    this.props.logoutUser();
  }

  //this.onLogoutClick = this.onLogoutClick.bind(this);

  return (
    <div className={classes.root}>
      <AppBar position="sticky">
        <Tabs value={value} onChange={handleChange} centered>
          {" "}
          {/* <Tabs value={value} onChange={handleChange}>
                {sections.map(section => (
                  <Tab label={section} />
                ))}
              </Tabs> */}{" "}
          <Tab label="Indicadores Globais" />
          <Tab label="Indicadores Colaboradores" />
          <Tab label="Indicadores Produto" />
          <Tab label="Indicadores Temporais" />
          <Button
            color="inherit"
            className={classes.classesButton}
            onClick={onLogoutClick}
          >
            Logout
          </Button>

TypeError：单击按钮时，无法读取未定义的属性“ props”。我知道问题出在onClick = {onLogoutClick}上，但是我不确定如何解决此问题。有帮助吗？

Answer 1

事件处理程序将使用事件对象覆盖回调中的this。为了确保组件在回调中作用域，您需要将其绑定到函数。

<Button
    color="inherit"
    className={classes.classesButton}
    onClick={onLogoutClick.bind(this)}
>

Answer 2

onLogoutClick内的this指向html元素。如果要以此方式访问组件，则需要与此绑定动作。

<Button
    color="inherit"
    className={classes.classesButton}
    onClick={onLogoutClick.bind(this)}
>

但这不是推荐的方法，因为它在每次渲染组件时都将其与动作绑定。推荐的方法是在构造函数中将此动作绑定。

constructor(props) {
     super(props);
        this.state = {
        };
        this.onLogoutClick = this.onLogoutClick.bind(this);
 }

道具无法识别

2 个答案: