如何通过单击其他元素来添加和删除元素的 class？在 React-redux 中

Question

我想通过单击 React-Redux 中的另一个元素来切换元素的 class。

Answer 1

对于 redux 实现，您将在第一个元素的点击事件上分派一个动作；第二个元素的 class 源自状态（它的 props 之一），因此当它响应点击而改变时，它会使用新的 class名字.

惯用的用法可能会将两个元素都包装在一个容器组件中，该容器组件编排了 props 和调度的事件；通常使用 connect 方法。

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;
}

class 应该更改的其他元素：

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>
            )
        }
    }

如何通过单击其他元素来添加和删除元素的 class？在 React-redux 中

How to add and remove class of an element by clicking on other? in React-redux

reactjs

redux

react-redux