Wie man den booleschen Zustand der reaktiven Komponente umschaltet?

Ich würde gerne wissen, wie man einen booleschen Zustand einer reagierenden Komponente umschalten kann. Zum Beispiel:Wie man den booleschen Zustand der reaktiven Komponente umschaltet?

Ich habe boolean Zustandsabfrage im Konstruktor meiner Komponente:

constructor(props, context) { 
    super(props, context); 

    this.state = { 
     check: false 
    }; 
};

Ich versuche, den Zustand jedes Mal meine Checkbox angeklickt zu wechseln, die this.setState Methode:

<label><input type=checkbox" value="check" onChange = {(e) => this.setState({check: !check.value})}/> Checkbox </label>

Natürlich bekomme ich eine Uncaught ReferenceError: Check ist nicht definiert. Wie kann ich das erreichen?

Vielen Dank im Voraus.

Quelle

2016-11-01 noob

Es ist genau so, wie es sagt, Scheck ist nicht definiert. Wahrscheinlich wollten Sie 'this.state.check' in' this.setState ({check:! Check.value}) 'schreiben. Fügen Sie die Checkbox für die Checkbox hinzu, die sich je nach Status der Komponente ändert. 'checked = {this.state.checked}' –

sollten Sie this.state.check statt check.value hier verwenden:

this.setState({check: !this.state.check})

Aber trotzdem ist es schlechte Praxis es auf diese Weise zu tun. Viel besser, es zu separater Methode zu verschieben und Callbacks nicht direkt in Markup zu schreiben.

Quelle

2016-11-01 12:17:43

Upvoted, aber aus Neugier - warum ist das "schlechte Praxis"? –

Es ist besser, Ansicht und Logik zu trennen, da Sie auf diese Weise Ihre Logik und Ihr Markup separat und einfacher sehen und aktualisieren können. –

es scheint wie die Standardmethode, es auf Redux und React Semantic UI zu tun – carkod

Versuchen:

<label><input type=checkbox" value="check" onChange = {(e) => this.setState({check: !this.state.check.value})}/> Checkbox </label>

check: !check.value Mit der Benutzung es für das check Objekt sucht, die Sie nicht erklärt haben.

Sie müssen angeben, dass Sie den entgegengesetzten Wert von this.state.check möchten.

Quelle

2016-11-01 12:17:47

Verwenden Sie checked, um den Wert zu erhalten. Während onChange, checked wird true sein und es wird eine Art von boolean sein.

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

2016-11-01 12:58:08

Da niemand gepostet, ich habe die richtige Antwort bin Entsendung. Wenn Ihre neue Statusaktualisierung vom vorherigen Status abhängt, verwenden Sie immer das Funktionsformular setState, das als Argument eine Funktion akzeptiert, die einen neuen Status zurückgibt.

In Ihrem Fall:

this.setState(prevState => ({ 
    check: !prevState.check 
}));

Siehe docs

Quelle

2018-01-23 05:01:41 Dane

Wie man den booleschen Zustand der reaktiven Komponente umschaltet?

Antwort

Verwandte Themen