1
votes

Meilleur moyen de définir l'état de l'objet à l'aide du nom de clé dynamique? - reactjs

J'ai un état de réaction comme:

this.state = {
  formInputs: {
    username: '',
    password: '',
    passwordConfirm: '',
  },
  handleChange = () => {
    const {target: {name, value}} = event;
    this.setState({
      [name as keyof formInputs]: value
    });
  }
};

Comment puis-je changer cette ligne ([name as keyof formData]: value) en JavaScript au lieu de Typescript?

javascript reactjs

1 commentaires

Veuillez publier un exemple minimal reproductible pour ceci ou une démonstration de codesandbox.

3 Réponses :

2
votes

Vous pouvez utiliser directement Bracket_notation a>

this.setState({
    formInput: {
        ...this.state.formInput,
        [name]: value
    }
});

Dans votre cas, {formInput: {username: "", password: ""}

[name]: value

2 commentaires

J'ai essayé cela mais cela lie les données du formulaire. par exemple, je console les valeurs d'état du formulaire sont toujours nulles.

Je pense que vous devriez mettre votre fonction handleChange hors de votre état

4
votes

Nous pouvons utiliser le concept de noms de propriété calculés pour calculer dynamiquement le nom de propriété de l'objet. Pour cela, nous devons mettre l'expression dans [] .

Lorsque vous avez besoin de gérer plusieurs éléments d'entrée contrôlés, vous pouvez ajouter un attribut de nom à chaque élément et laisser la fonction de gestion choisir quoi faire en fonction de la valeur de event.target.name.

Pour votre état

import React, { Component } from "react";

export default class Login extends Component {
  state = {
    formInputs: {
      email: "",
      password: ""
    }
  };

  handleOnChange = event => {
    this.setState({
      formInput: {
        ...this.state.formInput,
        [event.target.name]: event.target.value
      }
    });
  };

  render() {
    return (
      <form>
        <label>Email</label>
        <input type="text" name="email" onChange={this.handleOnChange} />
        <label>Password</label>
        <input type="password" name="password" onChange={this.handleOnChange} />
      </form>
    );
  }
}

Sandbox pour votre référence: https://codesandbox.io/s/react-basic-example-p7ft8

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

3 commentaires

et si vous avez un objet d'état de formulaire comme: state = {formInput: {username: "", password: ""} le définiriez-vous toujours comme ceci handleOnChange = event => {this.setState ({[event.target.name] : event.target.value})}

J'ai modifié ma réponse à cette question

Je pense que ma modification est également identique à ce que @Burak Gavas a répondu

0
votes

Je pense que vous pouvez initialiser votre formObject en tant que json vide et

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

Plus tard, vous pouvez définir la valeur quelque chose comme

this.state = {formInput: {}}

0 commentaires