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

Question

我有一个素材ui头像，它的颜色（pinkgreen）来自于style.The问题出现了，我需要根据onclick把颜色从粉色改成绿色。我试着在tate中保留颜色名称，但是没有用。

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>

但我想根据点击时的情况将颜色从粉色变为绿色。

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);

样品演示