2
votes

Comment obtenir une valeur du sélecteur DateTime dans React?

J'utilise Material-UI pour créer un sélecteur de date / heure. Voici mon code de démonstration.

J'ai ajouté console.log à la fonction handleChange pour voir une valeur actuellement sélectionnée. Cependant, la valeur ne change pas lorsque j'utilise le sélecteur DatTime:

handleChange = name => event => {
  const target = event.target;
  const name = target.name;
  console.log("plannedDep", this.state.plannedDep)
  this.setState({
      [name]: event.target.value
  });
};

javascript reactjs material-ui

0 commentaires

3 Réponses :

0
votes

Vous remplacez l'argument name passé à la méthode handleChange à l'intérieur de cette méthode, en faisant const name = target.name; , donc quand vous réinitialisez l'état à la fin:

<TextField
  id="datetime-local"
  name="plannedDep" // see here!
  label="Next appointment"
  type="datetime-local"
  onChange={this.handleChange("plannedDep")}
  defaultValue="2017-05-24T10:30"
  className={classes.textField}
  InputLabelProps={{
    shrink: true
  }}
/>

Vous ne définissez pas le plannedDep attendu .

Vous pouvez le corriger de deux manières:

1) Définissez l'état directement via:

this.setState({
  plannedDep: event.target.value
})

2) Ajoutez un attribut de nom à votre TextField afin que target.name sera la valeur de l'attribut name de votre TextField qui a déclenché l'événement:

this.setState({
  [name]: event.target.value
})

Ici, la démo fonctionnelle

2 commentaires

Merci. Lorsque je commence à taper, console.log renvoie des valeurs telles que 0201-05-24T10: 35 au lieu de 2018-05-24T10: 35 . Il semble mettre à jour une valeur à chaque contact d'un sélecteur DateTime et sélectionne une valeur inachevée pour une raison quelconque.

c'est parce que vous imprimez la valeur précédente dans l'état, pas l'actuel, vous devez faire console.log ("planifiéDep", event.target.value);

0
votes

Je pense que le problème vient de votre gestionnaire onChange . Si vous passez une valeur dans onChange , vous devez l'initialiser dans un rappel. Essayez de changer votre onChange en onChange = {() => this.handleChange ("planifiéDep")}

0 commentaires

2
votes

J'ai ajouté la valeur d'état comme valeur par défaut à planifiéDep. value={this.state.plannedDep}
J'ai changé le onChange de cette façon: onChange = {(event) => this.handleChange ("planifiéDep", événement)} . En suivant votre code, onChange = {this.handleChange ("planDep")} le changement que vous avez sera déclenché dès que le composant est monté et pour chaque changement d'état / accessoire entraînant des rendus inutiles.

handleChange = (name, event) => {
  const target = event.target; // Do we need this?(unused in the function scope)!
  this.setState({
    [name]: event.target.value
  }, () => {
    console.log(this.state.plannedDep)
    // Prints the new value.
  });
};

Nous devons vérifier la valeur après avoir défini l'état, pas avant de le définir. Je vérifie dans le rappel de setState, et il me montre la valeur mise à jour.

<TextField
  id="datetime-local"
  label="Next appointment"
  type="datetime-local"
  onChange={(event) => this.handleChange("plannedDep", event)}
  value={this.state.plannedDep}
  className={classes.textField}
  InputLabelProps={{
    shrink: true,
  }}
 />

J'espère que cela résout votre problème :)

1 commentaires

Cool! Merci!!