Question

这是我的第一篇文章，对不起，如果已经回答了这个问题。

我试图在onMouseEnter上使用React不断更新按钮元素，直到鼠标退出。我在下面做的代码与我想要的类似，但它不会在mouseEnter上不断更新它只是每个mouseEnter更新一次。相反，它应该只是按照从默认到链接的顺序继续拖拽引导按钮样式，然后返回默认值直到鼠标退出。就像在下面的代码中一样，更改应该在退出时停止并继续在同一个地方再次悬停。非常感谢任何帮助。

var count = 0;


class ColorButton extends React.Component{
constructor(props){
  super(props);
  this.state = {hover: false};
  this.changeStuff = this.changeStuff.bind(this);
  this.fixStuff = this.fixStuff.bind(this);
  this.setMessage = this.setMessage.bind(this);
}

  changeStuff(){
    this.setState(
      {
        hover: true
      }
    );
  }

  fixStuff(){
    this.setState(
      {
        hover: false
      }
    );
  }


  render() {
    var classes = 'btn btn-default';
    var name = "Default";
    if(this.state.hover == true)
    {
      if(count==0)
      {
        classes = 'btn btn-primary';
        name = "Primary";
        count++;
      }
      else if(count==1)
      {
        classes='btn btn-success';
        name = "Success";
        count++;
      }
      else if(count==2)
      {
        classes='btn btn-info';
        name = "Info";
        count++;
      }
      else if(count==3)
      {
        classes='btn btn-warning';
        name = "Warning";
        count++;
      }
      else if(count==4)
      {
        classes='btn btn-danger';
        name = "Danger";
        count++;
      }
      else if(count==5){
        classes='btn btn-link';
        name = 'Link';
        count++;
      }
      else
      {
        classes='btn btn-default';
        name='Default';
        count = 0;
      }
    }
    return(
      <button className={classes} onMouseOver={this.changeStuff}>{name}</button>
    );
  }

}

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

Answer 1

你有两个问题。首先，你假设渲染每秒都在发生。只有在您调用setState或道具更改时才会进行渲染。最简单的方法是在每小时调用setState的mouseenter上设置超时。其次是你在渲染功能中创建了“副作用”。在反应中，我们永远不希望我们的渲染函数操纵外部值，因为我们永远不知道何时会调用渲染。试试这个。我创建了一个每秒更新计数的间隔，然后在每次调用setState时调用的render函数中使用该值。

class ColorButton extends React.Component{
  constructor(props){
    super(props);
    this.state = { count: 0 };
    this.changeStuff = this.changeStuff.bind(this);
    this.fixStuff = this.fixStuff.bind(this);
    this.setMessage = this.setMessage.bind(this);
  }

  changeStuff() {
    this.interval = setInterval(() => {
      this.setState({ count: this.state.count + 1 });
    }, 1000);
  }

  fixStuff(){
    clearInterval(this.interval);
    this.setState({ count: 0 });
  }


  render() {
    var classes = 'btn btn-default';
    var name = "Default";
    if (count === 0) {
      classes = 'btn btn-primary';
      name = "Primary";
    } else if (count === 1) {
      classes = 'btn btn-success';
      name = "Success";
    } else if (count === 2) {
      classes='btn btn-info';
      name = "Info";
    } else if (count === 3) {
      classes='btn btn-warning';
      name = "Warning";
    } else if (count === 4) {
      classes='btn btn-danger';
      name = "Danger";
    } else if (count === 5) {
      classes='btn btn-link';
      name = 'Link';
    } else {
      classes='btn btn-default';
      name='Default';
    }
    return(
      <button className={classes} onMouseOver={this.changeStuff}>{name}</button>
    );
  }

}

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

Answer 2

我已将您的代码重构为以下代码。它每1秒用类和名称的新值更新状态。您可以在间隔函数中控制时间。

import React from 'react'

const buttonsData = [
  {
    classes:'btn btn-primary',
    name:'Primary',
  },
  {
    classes:'btn btn-success',
    name:'Success',
  },
  {
    classes:'btn btn-info',
    name:'Info',
  },
  {
    classes:'btn btn-warning',
    name:'Warning',
  },
  {
    classes:'btn btn-danger',
    name:'Danger',
  },
  {
    classes:'btn btn-link',
    name:'Link',
  },
  {
    classes:'btn btn-default',
    name:'Default',
  },

]

class ColorButton extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      hover: false,
      classes: 'btn btn-default',
      name: 'Default'
    };
  }

  onHover = () => {
    this.setState({
      hover: true,
    }, this.intervalFunction)
  }

  intervalFunction = () => {
    const dataLen = buttonsData.length
    let index = 0
    this.intervalId = setInterval(() => {
      index = index === dataLen ? 0 : index
      if(this.state.hover) {
        this.setState({
          classes: buttonsData[index].classes,
          name: buttonsData[index].name
        })
      }
      index++
    }, 1000)
  }

  onHoverOut = () => {
    this.setState({
      hover: false,
    }, () => clearInterval(this.intervalId))
  }

  render() {
    return(
      <button
        className={this.state.classes}
        onMouseOver={this.onHover}
        onMouseOut={this.onHoverOut}>
        {this.state.name}
      </button>
    );
  }
}

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

React：连续更改元素onMouseEnter

2 个答案: