다른 항목을 클릭하여 요소의 클래스를 추가 및 제거하는 방법리액트-리플렉스로

다른 항목을 클릭하여 요소의 클래스를 추가 및 제거하는 방법리액트-리플렉스로

반응 축소x에서 다른 요소를 클릭하여 요소의 클래스를 전환하고 싶다.

나는 이 문제를 해결했고, 이것을 하기 위한 다음 단계를 따르라.

클릭이 수행되는 요소:

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

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

환원 구현의 경우 첫 번째 요소에서 클릭 이벤트에 대한 액션을 발송하고, 두 번째 요소는 상태(소품 중 하나)에서 해당 클래스를 파생하여 클릭에 응답하여 변경될 때 새 클래스 이름으로 다시 렌더링하도록 한다.

관용적 사용은 아마도 소품과 발송된 이벤트를 조율하는 컨테이너 구성요소에 두 요소를 감쌀 것이다. 대개 연결 방법을 사용한다.

참조URL: https://stackoverflow.com/questions/40653232/how-to-add-and-remove-class-of-an-element-by-clicking-on-other-in-react-redux