2
votes

Changer l'état à chaque fois que le bouton est cliqué dans les deux sens dans React?

Je sais donc comment changer d'état lorsque le bouton est cliqué une fois, mais comment changer le nouvel état à l'état précédent lorsque le bouton est à nouveau cliqué?

reactjs state onclick

0 commentaires

6 Réponses :

1
votes

Prenons cet exemple: https://jsfiddle.net/shanabus/mkv8heu6/6/ a>

this.state = { previousValue: "test", currentValue: "new thing" }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Ici, nous utilisons un booléen vrai / faux et basculons entre les deux états. Si vous cherchez à utiliser d'autres données personnalisées comme état précédent, créez simplement une variable différente pour cela.

Par exemple:

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	buttonState: true
    }
    this.toggleState = this.toggleState.bind(this)
  }
  
  render() {
    return (
      <div>
      <h2>Button Toggle: {this.state.buttonState.toString()}</h2>                
        <button onClick={this.toggleState}>Toggle State</button>
      </div>
    )
  }
  
  toggleState() {
  	this.setState({ buttonState: !this.state.buttonState })
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))

0 commentaires

0
votes

Vous devez enregistrer l'état précédent. Vous pouvez même faire de l'état précédent une partie de votre état réel - mais je vais laisser cela comme un exercice pour l'OP (Remarque: vous pouvez conserver un historique complet des états précédents en utilisant cette technique). Malheureusement, je ne peux pas encore écrire d'exemples du haut de ma tête en utilisant la nouvelle fonctionnalité de hooks:

class MyComponent extends ReactComponent {
  prevState = {}
  state = {
    isActive: false,
    // other state here
  }

  handleClick = () => {
    // should probably use deep clone here
    const state = Object.assign({}, this.state);

    this.setState(state.isActive ? this.prevState : Object.assign(state, { 
      isActive: true,
      // other state here
    });

    this.prevState = state;
  }

  render() {
    return <button onClick={this.handleClick}>Toggle State</button>
  }
}

3 commentaires

Cela peut fonctionner dans un exemple simple mais ce n'est pas une bonne idée. setState peut prendre une fonction au lieu d'un objet, ce qui vous permet d'accéder à l'état précédent (voir reactjs.org/docs/react-component.html#setstate ). De plus, vous ne souhaitez pas copier l'intégralité de votre état et l'appliquer à l'état défini. C'est exagéré. Vous fournissez simplement l'objet que vous souhaitez modifier. React conservera tous les états inchangés.

@larz en fait, vous n'obtenez pas l'état précédent dans le rappel - vous obtenez l'état actuel ... qui deviendra bientôt l'état précédent une fois qu'un nouvel état est créé.

De plus, copier l'état entier et le transmettre à setState est un modèle courant (lisez sur l'immuabilité avec React). L'algorithme différent de React est extrêmement rapide et peut reprendre les éléments qui ont changé.

5
votes

Vous pouvez simplement basculer l'état.

Voici un exemple utilisant un composant:

const ButtonExample = () => {
  const [status, setStatus] = useState(false);

  return (
    <button onClick={() => setStatus(!status)}>
      {`Current status: ${status ? 'on' : 'off'}`}
    </button>
  );
};

Voici un exemple utilisant hooks (disponible dans la v16.8.0):

class ButtonExample extends React.Component {
  state = { status: false }

  render() {
    const { status } = this.state;
    return (
      <button onClick={() => this.setState({ status: !status })}>
        {`Current status: ${status ? 'on' : 'off'}`}
      </button>
    );
  }
}

Vous pouvez modifier le "on" et "off" à tout ce que vous voulez basculer. J'espère que cela vous aidera!

5 commentaires

Cela ne fait basculer qu'une seule valeur. Que faire si le composant a deux états complexes, chacun avec un horodatage du moment où cet état a été créé?

C'est vrai, mais cela ne semblait pas être l'intention de la question. Si Eduardo voulait savoir comment faire quelque chose de plus compliqué, j'ai pensé qu'il aurait fourni plus de détails dans sa question.

"Comment changer le nouvel état à l'état précédent" . Ce n'est pas la même chose que "Comment basculer une valeur booléenne" ...

Vous semblez contrarié. La question est composée de deux phrases et traite d'un bouton (qui a généralement deux états). J'ai répondu à la question en me basant sur ce que je pensais qu'Eduardo demandait. S'il n'aime pas la réponse que j'ai fournie, il n'acceptera pas ma réponse.

Je vous assure que mon humeur n'est jamais affectée par une conversation sur SO. Je suppose que les programmeurs apprennent à retourner un booléen leur premier jour de programmation. Le retour à l'état est un problème très différent, et il se trouve que c'est exactement ce que l'OP a demandé.

0
votes

à l'état:

clickhandler(ID) {

if (this.state.toggleBtn === ID) {
        this.setState({ toggleBtn: "" });
    } else {
        this.setState({ toggleBtn: ID});
    }

dans votre bouton:

<button key="btn1" onClick={() => this.clickhandler(btn1)}>
   {this.state.toggleBtn === ID? "-" : "+"}
</button>

dans votre gestionnaire de clics:

this.state = {toggleBtn: ""}

0 commentaires

1
votes

Cela passera à la valeur précédente et à la nouvelle valeur:

 constructor() {
        super();

      this.state = {
        inputValue: "0"
      }
    }

     render() {
     return (
     <div>
      <input
        type="button"
        name="someName"
        value={this.state.inputValue}
        onClick={() =>
         this.state.inputValue === "0"
         ? this.setState({
         inputValue: "1"
         })
         : 
        this.setState({
        inputValue: "0"
        })
        }
         className="btn btn-success"
      />
    </div>
     )
    }

Description:

Si la valeur actuelle = 0, définissez la valeur sur 1, et vice versa.

Ceci est utile si vous avez beaucoup d'entrées. Ainsi, chaque entrée a un état ou une condition différent.

0 commentaires

1
votes

Voici mon exemple de show on toggle en utilisant React Hook sans utiliser useCallback ().
Lorsque vous cliquez sur le bouton, il affiche "Bonjour" et vice-versa.
J'espère que cela vous aidera.

const IsHiddenToggle = () => {
  const [isHidden, setIsHidden] = useState(false);

  return (
      <button onClick={() => setIsHidden(!isHidden)}>
      </button>
      {isHidden && <p>Hello</p>}
  );
};

0 commentaires