反應：持續改變元素onMouseEnter

Question

這是我的第一篇文章，很抱歉，如果這已經得到解答。

我試圖以不斷更新使用反應，而OnMouseEnter在直到鼠標退出按鈕元素。我在下面做的代碼與我想要的類似，但它不會在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或道具更改時纔會進行渲染。最簡單的方法就是在mouseenter上設置每秒鐘調用setState的超時時間。其次，你正在渲染功能中創建「副作用」。在反應中，我們不希望渲染函數操縱外部值，因爲我們從不知道何時會調用渲染。嘗試這個。我創建了一個間隔，每秒更新一次計數，然後在每次調用setState時都會調用的渲染函數中使用該值。

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