Question

我对反应并不了解，但是我需要做一个项目。我创建了样式和元素，需要将按钮悬停。

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'),

Answer 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一起使用，这是非常流行的内联样式。

希望有帮助

反应按钮悬停？

1 个答案: