4
votes

ReactJS: utiliser alert () pour prendre les entrées de l'utilisateur

Comment puis-je utiliser alert () pour permettre à l'utilisateur de saisir son nom et de l'enregistrer dans l'état?

Voici ce que j'ai tenté jusqu'à présent:

render: function() {
    return (
      <div>
        <input type="text" onChange={ this.handleChange } />
        <Button>Save</Button>
      </div>
    );
  }
}

javascript reactjs

0 commentaires

3 Réponses :

0
votes

Vous voudrez probablement examiner la méthode prompt () de Javascript.

0 commentaires

1
votes

Je pense que vous voulez dire prompt ():

var userName = prompt('Please Enter your Name')

La variable userName contiendra la réponse de l'utilisateur.

0 commentaires

5
votes

Une option serait d'utiliser l'invite ( ) function , qui affiche une boîte de dialogue modale à travers laquelle les entrées utilisateur peuvent être saisies et acquises. La méthode prompt () vous permet également de fournir un message d'accueil personnalisé, qui peut être passé comme premier argument comme ceci:

/* Definition of handleClick in component */
handleClick = (event) => {

    /* call prompt() with custom message to get user input from alert-like dialog */
    const enteredName = prompt('Please enter your name')

    /* update state of this component with data provided by user. store data
       in 'enteredName' state field. calling setState triggers a render of
       this component meaning the enteredName value will be visible via the
       updated render() function below */
    this.setState({ enteredName : enteredName })
}

render: function() {
    return (
      <div>

        {/* For demonstration purposes, this is how you can render data 
            previously entered by the user */ }
        <p>Previously entered user name: { this.state.enteredName }</p>

        <input type="text" onChange={ this.handleChange } />
        <input
          type="button"
          value="Alert the text input"
          onClick={this.handleClick}
        />
      </div>
    );
  }
});

En intégrant ceci à votre composant react existant peut être fait de plusieurs façons - une approche pourrait être la suivante:

    const enteredName = prompt('Please enter your name')

0 commentaires