Ich habe eine onClick-Funktion, die den Status eines className ändert, so dass einige Stylings anzeigen und ausblenden, die ich habe. Der Button funktioniert beim ersten Klick einwandfrei, kann danach aber nicht mehr angeklickt werden.onClick-Funktion in reagieren auf eine Schaltfläche kann nur einmal ausgelöst werden
Im Folgenden habe ich meine Komponente, die zu meinem Redux-Shop verbindet. Ich habe die handleClick-Funktion erstellt, um den actionCreator aufzurufen, den ich in meinen Aktionen gezeigt habe. Ich möchte, dass die onClick-Funktion bei jedem Klick ausgelöst wird und den Klick, der sich in meinem Status befindet, in das Gegenteil von dem ändert, was er zuvor war. Fehle ich irgendwo den vorherigen Zustand? Ändere ich direkt meinen Zustand, wenn ich den Zustand kopieren sollte? Wie auch immer, hoffentlich macht die Frage Sinn.
Edit: Ich habe festgestellt, dass, wenn ich den Knopf klicke, der Klick-Zustand bleibt wahr, weiß nicht, warum es nicht schaltet.
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,
}
}
Sie zeigen nicht die Deklaration von 'actionCreators' in Ihrem Schnipsel getan haben sollte. Wenn Sie jedoch 'this.props.projectClick();' aufrufen, übergeben Sie dort kein Argument - kann das Ihr Problem sein? Wenn es immer ein Toggle ist, können Sie auch 'click:! State.click' in Ihrem Reducer verwenden. Glückliches Debugging. ;-) – sthzg
Das war das Problem. Pfui. Ich benutzte Requisiten nicht. –