Jak przełączyć stan boolowski składnika reagującego?

Chciałbym wiedzieć, jak przełączyć stan boolowski składnika reagującego. Na przykład:

Mam kontrolę stanu boolowskiego w konstruktorze mojego komponentu:

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

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

Próbuję przełączać stan za każdym razem, gdy klikam moje pole wyboru, używając metody this.setState:

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

Oczywiście otrzymuję Uncaught ReferenceError: check nie jest zdefiniowany . Jak więc mogę to osiągnąć?

Z góry bardzo dziękuję.

Ponieważ nikt tego nie opublikował, zamieszczam poprawną odpowiedź. Jeśli aktualizacja nowego stanu zależy od poprzedniego stanu, zawsze używaj formy funkcjonalnej, w setStatektórej jako argument przyjmuje się funkcję zwracającą nowy stan.

W Twoim przypadku:

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

Zobacz dokumentację

Ponieważ ta odpowiedź staje się popularna, dodajmy podejście, które powinno być używane dla React hooków (v16.8 +):

Jeśli używasz useStatehaka, użyj następującego kodu (w przypadku, gdy twój nowy stan zależy od poprzedniego stanu):

const [check, setCheck] = useState(false);
// ...
setCheck(prevCheck => prevCheck + 1);

Powinieneś użyć this.state.checkzamiast check.valuetutaj:

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

Ale w każdym razie robienie tego w ten sposób jest złą praktyką . Znacznie lepiej jest przenieść go do oddzielnej metody i nie pisać wywołań zwrotnych bezpośrednio w znacznikach.

Użyj, checkedaby uzyskać wartość. Podczas onChange, checkedbędzie truei będzie to rodzaj boolean.

Mam nadzieję że to pomoże!

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>

Oto przykład użycia hooków (wymaga 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>

Możesz także użyć hooka Reacta, useStateaby zadeklarować stan lokalny dla komponentu funkcji. Początkowy stan zmiennej toggledzostał przekazany jako argument do metody .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

Próbować:

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

Użycie check: !check.valueoznacza, że ​​szuka checkobiektu, którego nie zadeklarowałeś.

Musisz określić, że chcesz mieć przeciwną wartość this.state.check.

Wydaje mi się, że jest to najprostsze podczas przełączania wartości boolowskich. Mówiąc prosto, jeśli wartość jest już prawdziwa, ustawia ją na fałsz i odwrotnie. Uważaj na niezdefiniowane błędy, upewnij się, że Twoja właściwość została zdefiniowana przed wykonaniem

this.setState({
   propertyName: this.propertyName = !this.propertyName
});

W zależności od kontekstu; Pozwoli to zaktualizować stan podany w funkcji mouseEnter. Tak czy inaczej, ustawiając wartość stanu na true: false, możesz zaktualizować tę wartość stanu dla dowolnej funkcji, ustawiając ją na wartość przeciwną za pomocą!this.state.variable

state = {
  hover: false
}

onMouseEnter = () => {
  this.setState({
    hover: !this.state.hover
  });
};

Wylądowałem na tej stronie, gdy szukam opcji przełączania stanu w komponencie React przy użyciu Redux, ale nie znajduję tutaj żadnego podejścia używającego tego samego.

Więc myślę, że może to pomóc komuś, kto walczył z zaimplementowaniem stanu przełączania za pomocą Redux.

Tutaj jest mój plik reduktora. Domyślnie otrzymuję stan początkowy fałszywy .

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;
};

Stan zmieniam po kliknięciu w obrazek. Tak więc mój tag img trafia tutaj z funkcją onClick.

<img onClick={togglePopup} src={props.currentUser.image} className="avatar-image avatar-image--icon" />

Moja funkcja Toggle Popup znajduje się poniżej, która wywołuje Dispatcher.

const togglePopup = ev => {
    ev.preventDefault();
    props.handlePopup(!props.popup);
};

To wywołanie prowadzi do poniższej funkcji mapDispatchToProps, która odzwierciedla stan przełączenia.

const mapDispatchToProps = dispatch => ({
    handlePopup: value => dispatch({ type: "POPUP", value })
});

Dziękuję Ci.