在 ReactJs 中替换悬停元素答案

【问题标题】：Replace element on hover in ReactJs在 ReactJs 中替换悬停元素
【发布时间】：2019-01-11 06:22:17
【问题描述】：

在这段代码中

 <div class='wrapper'>
     <div class='icon'>
        <i className="fa fa-fw fa-globe" style={{ fontSize: '1.75em' }} />
      </div>
 </div>

每当用户将鼠标悬停在 'icon' div 上时，此代码

<i className="fa fa-fw fa-globe" style={{ fontSize: '1.75em' }} />

应该换成这个

<p> Lorem ipsum </p>

我能够实现改变样式但不知道如何替换元素。请帮帮我。

【问题讨论】：

标签： javascript html reactjs css

【解决方案1】：

与 React 中的大多数事情一样，您需要一个状态。比如：

constructor() {
  super();
  this.state = {isHovered: false};
}

当用户将鼠标悬停在图标内或外时，此状态需要更改：

toggleHover() {
  this.setState(prevState => ({isHovered: !prevState.isHovered}));
}

<div className='icon' onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>

然后根据状态决定应该显示什么的逻辑：

{this.state.isHovered ?
  <p> Lorem ipsum </p> :
  <i className="fa fa-fw fa-globe" style={{ fontSize: '1.75em' }} />
}

您可能希望有两种单独的方法，一种用于onMouseEnter，另一种用于onMouseLeave，而不是像我那样只为两者共享一个方法。

哦，你打错了：你在一些地方写了class而不是className。

演示

class App extends React.Component {
  constructor() {
    super();
    this.state = {isHovered: false};
    this.toggleHover = this.toggleHover.bind(this);
  }
  
  toggleHover() {
    this.setState(prevState => ({isHovered: !prevState.isHovered}));
  }

  render() {
    return (
      <div className='wrapper'>
        <div className='icon' onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>
          {this.state.isHovered ?
            <p> Lorem ipsum </p> :
            <i className="fa fa-fw fa-globe" style={{ fontSize: '1.75em' }} />
          }
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

.icon i {
  display: block;
  width: 32px;
  height: 32px;
  background: url('https://via.placeholder.com/32x32');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

【讨论】：

【解决方案2】：

您需要在 onMouseEnter 和 onMouseLeave 事件中使用状态

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isHover: false
        };

        this.onMouseEnterHandler = this.onMouseEnterHandler.bind(this);
        this.onMouseLeaveHandler = this.onMouseLeaveHandler.bind(this);
    }

    onMouseEnterHandler() {
        this.setState({
            isHover: true
        });
    }

    onMouseLeaveHandler() {
        this.setState({
            isHover: false
        });
    }

    render() {
        return (
            <div className="app">
                <div className="icon" onMouseEnter={this.onMouseEnterHandler} onMouseLeave={this.onMouseLeaveHandler}>
                    {
                        this.state.isHover
                            ? <div>hovered</div>
                            : <div>some text</div>
                    }
                </div>
            </div>
        );
    }
}

ReactDOM.render(
    <App/>,
    document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="app"></div>

【讨论】：

【解决方案3】：

除了@Chris 的回答，如果您不想创建事件处理程序，那么您可以创建一个内联箭头函数来完成这项工作。

onMouseEnter={()=> this.setState({isHovered: true})}

onMouseLeave={()=> this.setState({isHovered: false})}

这只是你可以使用的简写。

【讨论】：