我有一个 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,
}
}