web-dev-qa-db-fra.com

Désactiver une entrée en réaction avec un clic de bouton

J'ai ce composant de base et je veux que le champ de texte soit désactivé ou activé chaque fois que je clique sur un bouton. Comment puis-je atteindre cet objectif?

Ceci est mon exemple de code:

import React from "react";
import Button from 'react-button'

const Typing = (props) => {
    var disabled = "disabled";
    var enabled = !disabled;

  const handleUserInput = (event) => props.onUserInput(event.target.value);
  const handleGameClik = (props) => {

      disabled = enabled;
  }
  return(
      <div>

          <input
              className = "typing-container"
              value = {props.currentInput}
              onChange = {handleUserInput}
              placeholder=" ^__^ "
              disabled = {disabled}/>
          <Button  onClick = {handleGameClik}> Start Game  </Button>
          <Button> Fetch Data </Button>

          </div>
          );
};
buttoninputreactjsonclickcomponents
5
Second Son

Une solution simplifiée utilisant l'état pourrait ressembler à ceci:

class Typing extends React.Component {
  constructor(props) {
    super(props);
    this.state = { disabled: false }
  }
  handleGameClik() {
    this.setState( {disabled: !this.state.disabled} )
  } 
  render() {
    return(
        <div>
          <input
                className = "typing-container"
                placeholder= " type here "
                disabled = {(this.state.disabled)? "disabled" : ""}/>
          <button  onClick = {this.handleGameClik.bind(this)}> Start Game  </button>
          <button> Fetch Data </button>
        </div>
    );
  }
};

Travailler Codepen ici .

13
wintvelt

Cela peut vous semer la confusion, mais les gars de React.js reconstruisent en réalité chaque composant du formulaire et leur donnent un aspect presque identique à celui du composant HTML natif. Il y a cependant quelques différences.

En HTML, vous devez désactiver un champ de saisie comme celui-ci:

<input disabled="disabled" />

Mais dans React.js, vous devrez utiliser:

<input disabled={true} />

L'exemple accepté fonctionne car tout ce qui n'est pas 0 est considéré comme true. Ainsi, "disabled" est également interprété comme true.

1
Sam