Ich möchte wissen, wie man einen booleschen Zustand einer Reaktionskomponente umschaltet. Zum Beispiel:
Ich habe eine boolesche Statusprüfung im Konstruktor meiner Komponente:
constructor(props, context) {
super(props, context);
this.state = {
check: false
};
};
Ich versuche, den Status jedes Mal umzuschalten, wenn auf mein Kontrollkästchen geklickt wird. Verwenden Sie dazu die Methode this.setState:
<label><input type=checkbox" value="check" onChange = {(e) => this.setState({check: !check.value})}/> Checkbox </label>
Natürlich bekomme ich einen Uncaught ReferenceError: check ist nicht definiert . Wie kann ich das erreichen?
Vielen Dank im Voraus.
javascript
reactjs
reactjs-flux
Anfänger
quelle
quelle
this.state.check
inthis.setState({check: !check.value})
. Fügen Sie die für das Kontrollkästchen aktivierte Eigenschaft hinzu, die sich je nach Komponentenstatus ändern würde.checked={this.state.checked}
Antworten:
Da dies niemand gepostet hat, poste ich die richtige Antwort. Wenn Ihre neue Statusaktualisierung vom vorherigen Status abhängt, verwenden Sie immer die Funktionsform,
setState
die als Argument eine Funktion akzeptiert, die einen neuen Status zurückgibt.In deinem Fall:
this.setState(prevState => ({ check: !prevState.check }));
Siehe Dokumente
Da diese Antwort immer beliebter wird, fügen Sie den Ansatz hinzu, der für React Hooks (Version 16.8 +) verwendet werden sollte:
Wenn Sie den
useState
Hook verwenden, verwenden Sie den folgenden Code (falls Ihr neuer Status vom vorherigen Status abhängt):const [check, setCheck] = useState(false); // ... setCheck(prevCheck => prevCheck + 1);
quelle
this.setState({check: !this.state.check})
?increment = () => this.setState({count: this.state.count + 1});
und einen Codeblock vor:increment(); increment(); increment();
Reagieren Sie jetzt und stapeln Sie diese in etwas Analoges zu:setNewState = (oldState) => { newState.count = oldState.count + 1; newState.count = oldState.count + 1; newState.count = oldState.count + 1; return newState; }
Sehen Sie, wo das Problem liegt?Sie sollten
this.state.check
anstelle voncheck.value
hier verwenden:this.setState({check: !this.state.check})
Trotzdem ist es eine schlechte Praxis , dies so zu tun. Es ist viel besser, es in eine separate Methode zu verschieben und Rückrufe nicht direkt in das Markup zu schreiben.
quelle
setState
wie Async . Siehe meine Antwort unten.Verwenden Sie
checked
, um den Wert zu erhalten. WährendonChange
,checked
wirdtrue
und es wird eine Art von seinboolean
.Hoffe das hilft!
class A extends React.Component { constructor() { super() this.handleCheckBox = this.handleCheckBox.bind(this) this.state = { checked: false } } handleCheckBox(e) { this.setState({ checked: e.target.checked }) } render(){ return <input type="checkbox" onChange={this.handleCheckBox} checked={this.state.checked} /> } } ReactDOM.render(<A/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>
quelle
Hier ist ein Beispiel mit Hooks (erfordert React> = 16.8.0)
// import React, { useState } from 'react'; const { useState } = React; function App() { const [checked, setChecked] = useState(false); const toggleChecked = () => setChecked(value => !value); return ( <input type="checkbox" checked={checked} onChange={toggleChecked} /> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"><div>
quelle
Sie können auch den
useState
Hook von React verwenden, um den lokalen Status für eine Funktionskomponente zu deklarieren. Der Anfangszustand der Variablentoggled
wurde als Argument an die Methode übergeben.useState
.import { render } from 'react-dom'; import React from "react"; type Props = { text: string, onClick(event: React.MouseEvent<HTMLButtonElement>): void, }; export function HelloWorldButton(props: Props) { const [toggled, setToggled] = React.useState(false); // returns a stateful value, and a function to update it return <button onClick={(event) => { setToggled(!toggled); props.onClick(event); }} >{props.text} (toggled: {toggled.toString()})</button>; } render(<HelloWorldButton text='Hello World' onClick={() => console.log('clicked!')} />, document.getElementById('root'));
https://stackblitz.com/edit/react-ts-qga3vc
quelle
Versuchen:
<label><input type=checkbox" value="check" onChange = {(e) => this.setState({check: !this.state.check.value})}/> Checkbox </label>
Verwenden
check: !check.value
bedeutet, dass nach demcheck
Objekt gesucht wird, das Sie nicht deklariert haben.Sie müssen angeben, dass Sie den entgegengesetzten Wert von möchten
this.state.check
.quelle
Ich fand dies am einfachsten, wenn ich boolesche Werte umschaltete. Einfach ausgedrückt, wenn der Wert bereits wahr ist, wird er auf falsch gesetzt und umgekehrt. Achten Sie auf undefinierte Fehler und stellen Sie sicher, dass Ihre Eigenschaft definiert wurde, bevor Sie sie ausführen
this.setState({ propertyName: this.propertyName = !this.propertyName });
quelle
Abhängig von Ihrem Kontext; Auf diese Weise können Sie den Status mit der mouseEnter-Funktion aktualisieren. In beiden Fällen können Sie diesen Statuswert für jede Funktion aktualisieren, indem Sie ihn auf den entgegengesetzten Wert mit setzen, indem Sie einen Statuswert auf true: false setzen
!this.state.variable
state = { hover: false } onMouseEnter = () => { this.setState({ hover: !this.state.hover }); };
quelle
Ich bin auf dieser Seite gelandet, als ich versucht habe, den Umschaltstatus in der React-Komponente mit Redux zu verwenden, aber ich finde hier keinen Ansatz, der denselben verwendet.
Ich denke, es könnte jemandem helfen, der Schwierigkeiten hatte, den Umschaltstatus mithilfe von Redux zu implementieren.
Meine Reduzierungsdatei geht hier. Ich erhalte standardmäßig den Anfangszustand false .
const INITIAL_STATE = { popup: false }; export default (state = INITIAL_STATE, action) => { switch (action.type) { case "POPUP": return { ...state, popup: action.value }; default: return state; } return state; };
Ich ändere den Status beim Klicken auf das Bild. Also, mein img-Tag geht hier mit der onClick-Funktion.
<img onClick={togglePopup} src={props.currentUser.image} className="avatar-image avatar-image--icon" />
Meine Popup-Funktion zum Umschalten wird unten angezeigt, die den Dispatcher aufruft.
const togglePopup = ev => { ev.preventDefault(); props.handlePopup(!props.popup); };
Dieser Aufruf wird an die Funktion mapDispatchToProps weitergeleitet, die den umgeschalteten Status widerspiegelt.
const mapDispatchToProps = dispatch => ({ handlePopup: value => dispatch({ type: "POPUP", value }) });
Vielen Dank.
quelle