reactjs - reactjs中如何根据onclick改变头像颜色？

Question

我有材料 ui 头像，它从样式中获取颜色（粉红色/绿色）。当我需要根据 onclick 将颜色从粉红色更改为绿色时，就会出现问题。我试图保持颜色名称不变，但它不起作用，

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import { green, pink } from '@material-ui/core/colors';
import Avatar from '@material-ui/core/Avatar';
import FolderIcon from '@material-ui/icons/Folder';
import PageviewIcon from '@material-ui/icons/Pageview';
import AssignmentIcon from '@material-ui/icons/Assignment';

const styles = (theme) => ({
  root: {
    display: 'flex',
    '& > *': {
      margin: theme.spacing(1),
    },
  },
  pink: {
    color: theme.palette.getContrastText(pink[500]),
    backgroundColor: pink[500],
  },
  green: {
    color: '#fff',
    backgroundColor: green[500],
  },
});

class IconAvatars extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      color:""
    }
  }


  render(){
console.log(this.state.color)
const {classes} = this.props;
  return (
    <div className={classes.root}>
      <Avatar className={classes.pink} >
       <div onClick=''>M</div>
      </Avatar>
    </div>
  );
}
}
export default withStyles(styles)(IconAvatars)

使用此代码可以正常工作

  <div className={classes.root}>
      <Avatar className={classes.pink} >
       <div onClick=''>M</div>
      </Avatar>
    </div>

但我想根据 onclick 将颜色从粉红色更改为绿色

标签： reactjsmaterial-ui

Answer 1

根据 onClick 事件设置状态并从类中动态解构适当的颜色

class IconAvatars extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      color:""
    }
  }


  render(){
    const {color} = this.state;
    const {classes} = this.props;
    const AvatarClass = classes[color] || classes.pink;
    return (
        <div className={classes.root}>
          <Avatar className={AvatarClass} >
           <div onClick={() => this.setState({color: 'green'})}>M</div>
          </Avatar>
        </div>
      );
   }
}
export default withStyles(styles)(IconAvatars);

示例演示