Question

在此代码中

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

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

Answer 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>

Answer 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>

Answer 3

除了@Chris的答案，如果您不想创建事件处理程序，则可以创建一个内联箭头函数来完成此任务。

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

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

这只是您可以使用的简写方式。

在ReactJs中悬停时替换元素

3 个答案:

演示