他のをクリックして要素のクラスを追加したり削除する方法は？ React-reduxで

Question

React-Reduxの別の要素をクリックして要素のクラスを切り替えたいとします。

Answer 1

reduxの実装では、最初の要素からclickイベントに対してアクションをディスパッチします。 2番目の要素はその状態（1つは小道具の1つ）から派生したクラスを持つので、クリックに応じて変更されると、新しいクラス名で再レンダリングされます。

慣用的な使い方では、おそらく両方の要素が小道具とディスパッチされたイベントを編成したコンテナコンポーネントにラップされています。通常メソッドを使用して接続します。

Answer 2

私はこれを行うには、次の手順に従って、この問題を解決：クリックが行われ

要素：

class readMore extends Component { 

    constructor(props) { 
     super(props); 

     this.state = {classToSend: true }; 
    } 

    stateToRender(){ 
     (this.state.classToSend) ? this.setState({classToSend: false}) : this.setState({classToSend: true}); 
    } 

    onClickHandler(){ 
     this.stateToRender(); 
     this.props.readMore(this.state.classToSend); 
    } 

    render(){ 
     return (
      <div onClick={() => this.onClickHandler()} 
       className="readmore"> 
       <div className="readmore-btn">Read more</div> 
      </div> 
     ); 
    } 
} 

アクション作成者：

export function readMore(class_something) { 

    return { 
     type: READ_MORE, 
     payload: class_something 
    }; 

} 

がリデューサー：

export default function (state="", action) { 

    switch(action.type){ 

     case READ_MORE: 

      return action.payload; 
    } 

    return state; 
} 

オースクラスが変更になっているEr元素：

export class XYZ extends Component{ 

    constructor(props){ 
     super(props); 
    } 

    renderClassNames(){ 
     let classname = "slide-tourInfo"; 

     if (this.props.readMore) { 
      classname += " slide-tourInfo-scale"; 
     } 

     return classname; 
    } 

    render(){ 
     return(
      <div className = {this.renderClassNames()}> 

      </div> 
     ) 
    } 
} 

Answer 3

export default class MyClass extends Component{ 

     constructor(props){ 
      super(props); 

      this.state { 
       toggleClass: false 
      } 
     } 

     toggleFunction =() => { 
      this.setState({toggleClass: !this.state.toggleClass}) 
     } 

     render(){ 
      return(
       <div> 
        <button onClick={this.toggleFunction}>ClickMe</button> 
        <div className={this.state.toggleClass?'classOnTrue':'classOnFalse'}></div> 
       </div> 
      ) 
     } 
    }