将 onClick 传递给 material-ui 按钮 - 仅工作一次答案

【问题标题】：Pass onClick to material-ui button - works only once将 onClick 传递给 material-ui 按钮 - 仅工作一次
【发布时间】：2019-11-11 18:00:45
【问题描述】：

我正在尝试将 material-ui 按钮包装到另一个组件中。除非我尝试处理 onClick 事件，否则一切都很好。好像只能用一次。

（不）工作示例可在：

https://codesandbox.io/embed/material-demo-nn0ut?fontsize=14

源代码：

import React from "react";
import { useState } from "react";
import MaterialButton from "@material-ui/core/Button";
import { Component } from "react";
import { withStyles } from "@material-ui/core";

const stylesMain = {
  root: {
    fontSize: 16
  }
};

const stylesSecondary = {
  root: {
    fontSize: 14
  }
};

const StyledButtonMain = withStyles(stylesMain)(MaterialButton);
const StyledButtonSecondary = withStyles(stylesSecondary)(MaterialButton);

class Button extends Component {
  constructor(props) {
    super(props);
    this.onClick = function() {};
    this.href = null;
    this.target = null;
    this.type = "button";
    if (props.onClick) {
      this.onClick = props.onClick;
    }
    if (props.href) {
      this.href = props.href;
    }
    if (props.target) {
      this.target = props.target;
    }
    if (props.type) {
      this.type = props.type;
    }
  }

  render() {
    const StyledButton =
      this.props.color === "secondary"
        ? StyledButtonSecondary
        : StyledButtonMain;
    return (
      <StyledButton
        type={this.type}
        href={this.href}
        target={this.target}
        onClick={this.onClick}
        variant="contained"
        style={{ whiteSpace: "nowrap" }}
      >
        {this.props.children}
      </StyledButton>
    );
  }
}

export default function Counter(props) {
  const [counter, setCounter] = useState(0);
  return (
    <div>
      <h1>Counter: {counter}</h1>
      <Button
        onClick={() => {
          setCounter(counter + 1);
        }}
      >
        ClickMe
      </Button>
    </div>
  );
}

我已经预料到，onClick 应该以与“裸”材料 ui 按钮相同的方式工作。我该如何解决？

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

您的问题是您在 Button 构造函数中绑定了 onClick 函数。您可能知道，构造函数只调用一次，只要创建Button 类的实例。

在您的情况下，您基本上是在构造函数中将 setCounter 函数与固定值 1 绑定，从那时起，您将忽略 onClick 属性中传递的函数值。

要解决此问题，您只需替换 Button 渲染函数中的以下行：

onClick={this.onClick}

有了这个：

onClick={this.props.onClick}

【讨论】：

【解决方案2】：

您在渲染之间失去了 onClick() 的值。在初始加载时，它会根据 prop 设置它，但下一次渲染时它会丢失值，因为您不再加载它。

你可以像下面这样直接使用道具，如果你愿意的话，可以像我对 onClick 所做的那样使用三元运算符来进行空检查

class Button extends Component {

  render() {
    const StyledButton =
      this.props.color === "secondary"
        ? StyledButtonSecondary
        : StyledButtonMain;
    return (
      <StyledButton
        type={this.props.type}
        href={this.props.href}
        target={this.props.target}
        onClick={this.props.onClick ? this.props.onClick : () => {}}
        variant="contained"
        style={{ whiteSpace: "nowrap" }}
      >
        {this.props.children}
      </StyledButton>
    );
  }
}

【讨论】：