如何添加onMouseLeave＆amp; onMouseEnter中的.map函数

Question

我想在.map函数中添加一个：悬停效果来创建三个不同的按钮。

这是我的代码：

constructor() {
  super();
  this.state= {
   hovered: false
  }
  this.onMouseEnter = this.onMouseEnter.bind(this);
  this.onMouseLeave = this.onMouseLeave.bind(this);
}

onMouseEnter() {this.setState({hovered: false})}
onMouseLeave() {this.setState({hovered: true})}

render() {
const externalServiceButtons = {
  linkedin: {
    onClick: () => Meteor.loginWithLinkedin(),
    label: 'Linkedin',
    onMouseEnter: this.onMouseEnter,
    onMouseLeave: this.onMouseLeave
  },
  facebook: {
    onClick: () => Meteor.loginWithFacebook(),
    label: 'Facebook',
    onMouseEnter: this.onMouseEnter,
    onMouseLeave: this.onMouseLeave
  },
  google: {
    onClick: () => Meteor.loginWithGoogle(),
    label: 'Google',
    onMouseEnter: this.onMouseEnter,
    onMouseLeave: this.onMouseLeave
  }
}

    const authSocial = Object.keys(externalServiceButtons).map((key, index) => {
  const {
    color,
    label,
    onMouseEnter,
    onMouseLeave
  } = externalServiceButtons[key];

  return (
    <div
      key={index}>
      <FlatButton
        labelPosition='after'
        label={label}
        onMouseEnter={onMouseEnter}
        onMouseLeave={onMouseLeave}
      />
    </div>
   )
});

我遇到的问题是，当我将鼠标悬停在一个按钮上时，其他按钮会消失或变为白色或透明。