React：Element onMouseEnterを継続的に変更する

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

あなたには2つの問題があります。まず、毎秒レンダリングが行われていると仮定しています。レンダリングは、setStateに電話するか、小道具を変更するときにのみ発生します。これを行う最も簡単な方法は、毎秒setStateを呼び出すマウスセンターでタイムアウトを設定することです。もう1つは、レンダー機能に「副作用」を作り出していることです。リアクションでは、レンダリング関数が外部値を操作することは決して望ましくありません。これを試して。毎秒カウントを更新し、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'));