Question

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

Answer 1

我解决了这个问题，请按照以下步骤执行此操作：

完成点击的元素：

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

应该更改类的其他元素：

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 2

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

Answer 3

对于redux实现，您将从第一个元素的click事件上调度一个动作;第二个元素的类派生自州（其中一个道具），这样当它响应点击而改变时，它会用新的类名重新渲染。

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

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

3 个答案: