单击时更改样式

Question

我有 ReactJS 项目，我想在单击期间更改按钮的颜色。我知道它是一个Ripple API，但使用它非常难以理解。有人可以建议我怎么做吗？

我尝试创建两个元素 - 父元素和子元素 - 并在单击时将子元素的背景更改为透明。不幸的是，如果按钮处于活动状态并且它不起作用，我也有“类”对象负责更改类。我的代码如下：

import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import PropTypes from 'prop-types';
import styles from './MydButton.style';

class MyButton extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isClicked: false
    };
  }

  handleClick = () => {
    this.setState({ isClicked: !this.state.isClicked });
  }

  render() {
    const {
      classes,
      children,
      color,
      disabled,
      className,
      onClick,
      type,
      border,
      ...props
    } = this.props;

    const myClass = this.state.isClicked ? 'auxClass' : 'buttonDefaultRoot';


    return (
      <div className={classes.parentRoot} >
        <Button
          classes={{
            root: disabled
            ? classes.buttonDisabledRoot
            : classes.buttonRoot,
            label: disabled 
            ? classes.buttonLabelDisabled 
            : classes.buttonLabel,
          }}
          {...props}
          onClick={this.handleClick}
          className={myClass}
          disabled={disabled}
          type={type === undefined ? 'button' : type}
        >
          {children}
        </Button>
      </div>
    )
  }
};

MyButton.propTypes = {
  children: PropTypes.string.isRequired,
  disabled: PropTypes.bool,
  classes: PropTypes.object.isRequired,
};

MyButton.defaultProps = {
  disabled: false,
};

export default withStyles(styles)(MyButton);

和风格：

    const buttonRoot = {
      border: 0,
      height: 48,
      width: '100%',
    }


export default theme => ({
  buttonDefaultRoot: {
    ...buttonRoot,
    transition: 'all 1s ease-in-out',
    backgroundImage: 'linear-gradient(to right, #F59C81, #E65DA2, #E65DA2, #B13A97, #881E8E)',
    boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.16)',
    backgroundSize: '300% 100%',
    marginTop: 0,
    '&:hover': {
      backgroundPosition: '100% 0%',
      transition: 'all 1s ease-in-out',
    }
  },

  parentRoot: {
       ...buttonRoot,
       backgroundColor: 'red',   
       backgroundSize: '300% 100%',
        marginTop: 36,
      }, 

      auxClass: {
        backgroundImage: 'none',
      },

Answer 1

ReactJS 的 Material UI 核心

文档非常好。我已经更新了我的答案以适应这个问题的特定需求。我还为偶然发现这个问题的人提供了两个通用解决方案。

量身定制的解决方案：

将按钮的背景颜色从classes.buttonDefaultRoot（问题所有者定义的颜色）更改为此问题所有者定义的渐变。

第一步，在状态中存储一个变量。你可以随便叫它，但我叫 bgButton。将其设置为this.props.classes.buttonDefaultRoot这样：

state = {
  bgButton: this.props.classes.buttonDefaultRoot,
}

接下来，您要定义将处理点击的函数。再次，称之为你想要的。我会叫它handleClick。

handleClick = () => {
    const { classes } = this.props; //this grabs your css style theme
    this.setState({ bgButton: classes.parentRoot.auxClass }); //accessing styles
  };

这里正在发生一些事情。首先，我正在解构道具。因此，我正在创建一个const名为的新变量classes，其值与this.props.classes. 该classes包含一组对象的定义你的css风格你的按钮，利润率等，您可以访问这些样式就像你，如果你试图让在OBJ道具的价值。

在这种情况下，您可以通过执行，访问您的按钮样式classes.buttonDefaultRoot。这会处理您的手柄点击功能。

最后一步：渲染按钮。在您的渲染方法中，您希望bgButton像这样从状态中获取您的状态：

render() {
  const { bgButton } = this.state; 

然后你想分配你className的按钮bgButton并添加这样的onClick功能（这遵循 Material UI Core 文档）：

<Button variant="contained" color="primary" className={classNames(bgButton)} onClick={this.handleClick}>Button Name</Button>

把它们放在一起你会得到这个：

import React, { Component } from "react";
import Button from "@material-ui/core/Button";
import PropTypes from "prop-types";
import classNames from "classnames";
import { withStyles } from "@material-ui/core/styles";

export default theme => ({ ... }) //not going to copy all of this

class MyButton extends Component {
  state = {
    bgButton: null
  };
  handleClick = () => {
    const { classes } = this.props;
    this.setState({ bgButton: classes.parentRoot.auxClass });
  };
  render() {
    const { bgButton } = this.state;
    return (
      <div className={classes.container}>
        <Button
          variant="contained"
          color="primary"
          className={classNames(bgButton)}
          onClick={this.handleClick}
        >
          Custom CSS
        </Button>
      </div>
    );
  }
}

MyButton.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(MyButton);

通用解决方案

此解决方案适用于那些想要使用预定义颜色的人，即默认、主要、次要、继承。此实现不需要 PropTypes 或 className 导入。这会将颜色从预定义的蓝色更改为预定义的粉红色。就是这样。

state = {
  bgButton: "primary", 
} 
handleClick = () => {
  this.setState({ bgButton: "secondary" }); 
} 

render() {
  const { bgButton } = this.state; 
  return(
   ...
   <Button
     onClick = {this.handleClick} 
     variant = "contained" //checked Material UI documentation
     color={bgButton}
    > ..etc.

通用解决方案2

为了适应按钮的自定义样式，您必须导入 PropTypes 和 classNames 并采用与上述定制解决方案类似的方法。这里唯一的区别是我的语法和类名。我正在密切关注此处的文档，因此您可以轻松地跟进并在必要时重新调整。

    import React, { Component } from "react";
    import Button from "@material-ui/core/Button";
    import PropTypes from "prop-types";
    import classNames from "classnames";
    import { withStyles } from "@material-ui/core/styles";
    import purple from "@material-ui/core/colors/purple";

    const styles = theme => ({
      container: {
        display: "flex",
        flexWrap: "wrap"
      },
      margin: {
        margin: theme.spacing.unit
      },
      cssRoot: {
        color: theme.palette.getContrastText(purple[500]),
        backgroundColor: purple[500],
        "&:hover": {
          backgroundColor: purple[700]
        }
      },
      bootstrapRoot: {
        boxShadow: "none",
        textTransform: "none",
        fontSize: 16,
        padding: "6px 12px",
        border: "1px solid",
        backgroundColor: "#007bff",
        borderColor: "#007bff",
        fontFamily: [
          "-apple-system",
          "BlinkMacSystemFont",
          '"Segoe UI"',
          "Roboto",
          '"Helvetica Neue"',
          "Arial",
          "sans-serif",
          '"Apple Color Emoji"',
          '"Segoe UI Emoji"',
          '"Segoe UI Symbol"'
        ].join(","),
        "&:hover": {
          backgroundColor: "#0069d9",
          borderColor: "#0062cc"
        },
        "&:active": {
          boxShadow: "none",
          backgroundColor: "#0062cc",
          borderColor: "#005cbf"
        },
        "&:focus": {
          boxShadow: "0 0 0 0.2rem rgba(0,123,255,.5)"
        }
      }
    });

    class MyButton extends Component {
      state = {
        bgButton: null
      };
      handleClick = () => {
        const { classes } = this.props;
        this.setState({ bgButton: classes.cssRoot });
      };
      render() {
        const { classes } = this.props; //this gives you access to all styles defined above, so in your className prop for your HTML tags you can put classes.container, classes.margin, classes.cssRoot, or classes.bootstrapRoot in this example. 
        const { bgButton } = this.state;
        return (
          <div className={classes.container}>
            <Button
              variant="contained"
              color="primary"
              className={classNames(bgButton)}
              onClick={this.handleClick}
            >
              Custom CSS
            </Button>
          </div>
        );
      }
    }
MyButton.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(MyButton);

一个提示。您不再需要构造函数或绑定方法。

希望这可以帮助。