我有 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',
},
最佳答案
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
};
这里发生了几件事。首先，我正在解构 Prop 。因此，我正在创建一个名为 classes 的新 const 变量，它与 this.props.classes 具有相同的值。 classes 包含一组对象，这些对象定义了按钮、边距等的 css 样式。您可以访问这些样式，就像您尝试获取对象中 Prop 的值(value)。
在这种情况下，您可以通过 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.
通用方案二
要使您的自定义样式适应按钮，您必须导入 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);
一个提示。您不再需要构造函数或绑定(bind)方法。
希望这对您有所帮助。
关于css - 单击时更改样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53685292/