React/Reduxでローカルにコンポーネントの状態を管理する方法

Question

私は反応しています。私はreduxを使用しています。私はちょっと混乱している。例えば、私は2つのボタンを持っていて、そのうちの1つをクリックするたびに色の変更が必要です。

問題はあります：どちらのボタンをクリックしても、両方のボタンの色が変わっています。

react/reduxに直前にクリックされたボタンのみを考慮する方法を知りません。

これを解決する方法はありますか？

ありがとうございました。

Answer 1

まず、それは良い質問をする方法ではありません。いくつかのコードを表示する必要があります。何を試しましたか、問題はどこにありますか。

Check here how to ask good question.

あなたの問題の解決策は、あなたの地元の状態でクリックされたボタンのインデックスを格納し、インデックスは状態の指標と同じであれば、あなたのボタンのレンダリングの中身をチェックすることです。

あなたはこのような何かを行うことができます。

ここ

let buttons = ['Button 1', 'Button 2', "Button 3"] 


class Test extends React.Component { 
    constructor(){ 
    this.state = { 
     active: null 
    } 
    } 

    handleClick(i,event){ 
    this.setState({ 
     active: i 
    }) 
    } 

    render(){ 
    return (
     <div> 
      {this.props.buttons.map((button, i) => { 
       return (
        <div key={i}><button className={this.state.active === i ? 'active' : ''} onClick={this.handleClick.bind(this, i)}>{button}</button></div> 
       ); 
      })} 
     </div> 
    ) 
    } 
} 

React.render(<Test buttons={buttons}/>, document.getElementById('container')); 

がfiddleです。

Answer 2

Reactとno Reduxでプレイを開始することをお勧めします。あなたが見ることができる素晴らしいコースhttps://egghead.io/courses/getting-started-with-reduxがあります。

あなたの質問に対する答えは、両方のボタン状態をチェックするために1つの変数を使用していることです。