Question

我有一个改变className状态的onClick函数，所以显示和隐藏我的一些样式。该按钮在第一次单击时工作正常，但在此之后无法再次单击。

如下所示，我的组件连接到我的redux商店。我创建了handleClick函数来调用我在我的动作中显示的actionCreator。我希望onClick函数在每次单击时触发，并将处于我状态的单击更改为与之前相反的单击。我错过了以前的状态吗？我应该复制状态时直接改变我的状态吗？无论如何，希望这个问题是有道理的。

编辑：我发现当我点击按钮时，点击状态保持不变，不知道为什么不切换。

class BackDrop extends React.Component {

    handleClick = () => {
        this.props.projectClick();
    };
    render() {
        console.log(this.props);
    return (
        <div className={this.props.click ? 'backdrop-click' : 'backdrop'}>
            <button className="btn-click" onClick={()=> {this.handleClick()}}>
                {this.props.click ? 'Back' : 'View Projects'}
            </button>
            <ProjectDisplay
                click={this.props.click}
            />
        </div>
        )
    }
}
const mapStatetoProps = (state) => {
    return state;
};


export default connect(mapStatetoProps, actionCreators)(BackDrop);

//Reducer

const initialState = {
    click: false,
};

const mainReducer = (state = initialState, action) => {
    switch(action.type) {
        case "PROJECT_CLICK":
            return {
                ...state,
                click: !action.click,
            };
        default:
            return {
                ...state,
            }
    }
};

export default mainReducer;

//Action

export function projectClick(click) {
    return {
        type: "PROJECT_CLICK",
        click,
    }
}

Answer 1

当我完成click: !action.click

时，我已经使用了click: !state.click

onClick函数对按钮的反应只能被触发一次

1 个答案: