代码之家 › 专栏 › 技术社区 › kzrfaisal

在ReactJs中替换悬停时的元素

css3 reactjs css html javascript

kzrfaisal · 技术社区 · 7 年前

在这个代码中

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

我可以改变风格,但不知道如何替换元素。请帮帮我。

3 回复 | 直到 7 年前

Chris 7 年前

就像大多数的反应一样,你需要一种状态。类似于:

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>

pryahin.v 7 年前

您需要对onMouseEnter和onmouseleve事件使用state

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>

Manoz 7 年前

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

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

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

这只是一个你可以用的速记。