反应按钮悬停？答案

【问题标题】：React button hover?反应按钮悬停？
【发布时间】：2019-09-08 09:56:37
【问题描述】：

我对react了解不多，但我需要做一个项目。我创建了样式和元素，我需要让按钮悬停。

const style = {
  light: {
    popup: {
      width: "427.5px",
      position: "relative",
      boxShadow: "15px 15px 0 #201e74",
      backgroundColor: "rgba(243, 174, 153, 0.9)"
    },
    container: {
        marginLeft: "auto",
        marginRight: "auto",
        width: "90%",
        display: "flex",
        color: "#201e74",
        textAlign: "center",
    },
    formButton: {
        width: "262.5px",
        height: "45px",
        backgroundColor: "#201e74",
        color: "white",
        marginBottom: "50px",
      },

const type = "light";
const html = React.createElement("div", { style: style[type].popup }, 
    React.createElement("div", { style: style[type].container }, 
             React.createElement("button", { style: style[type].formButton },'SUBSCRIBE'),

【问题讨论】：

你真的想在按钮上显示一些悬停效果？
如果您想将鼠标悬停在样式对象内，请使用镭包...
Inline CSS styles in React: how to implement a:hover?的可能重复

标签： reactjs

【解决方案1】：

我认为 onMouseEnter 和 onMouseLeave 是可行的方法，但我认为不需要额外的包装器组件。以下是我的实现方式：

const html = React.createClass({
  getInitialState: function(){
    return {hover: false}
  },
  toggleHover: function(){
    this.setState({hover: !this.state.hover})
  },
  render: function() {
    var linkStyle;
    if (this.state.hover) {
      linkStyle = {backgroundColor: 'red'}
    } else {
      linkStyle = {backgroundColor: 'blue'}
    }
    return(
      <div>
        <a style={linkStyle} onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>Link</a>
      </div>
    )
  }

或者你可以使用Radium，它是 ReactJS 中非常流行的内联样式。

希望对你有帮助

【讨论】：