Reactjs setState() avec une dynamique de nom de la clé?

EDIT: ceci est un doublon, voir ici

Je ne peux pas trouver des exemples de l'utilisation d'une dynamique nom de la clé lors de la configuration de l'état. C'est ce que je veux faire:

inputChangeHandler : function (event) {
    this.setState( { event.target.id  : event.target.value } );
},

où l'événement.cible.id est utilisé comme état d'être mis à jour. Ce n'est pas possible de Réagir?

  • C'est un double de toute question concernant la dynamique des clés d'objet. Ce n'est pas spécifique à réagir
  • var newstate = {}; newstate[événement.cible.id] = event.cible.id; ce.setState(newstate);
  • Merci, je n'avais pas une bonne poignée sur l'utilisation des objets en général.
  • Double Possible de Comment puis-je créer une clé dynamique à être ajouté à l'objet JavaScript variable
  • Je suis à ce problème, mais, qu'avez-vous mis sur votre État initial? Il n'a pas d'importance, non?
InformationsquelleAutor trad | 2015-03-26
  1. 237

    Grâce à @Cory astuce, j'ai utilisé ceci:

    inputChangeHandler : function (event) {
    var stateObject = function() {
      returnObj = {};
      returnObj[this.target.id] = this.target.value;
         return returnObj;
    }.bind(event)();

    this.setState( stateObject );    
},

    Si vous utilisez ES6 ou la Babel transpiler pour transformer votre JSX code, vous pouvez accomplir cela avec propriété calculée noms, trop:

    inputChangeHandler : function (event) {
    this.setState({ [event.target.id]: event.target.value });
    //alternatively using template strings for strings
    //this.setState({ [`key${event.target.id}`]: event.target.value });
}
    • Il ya aussi une nouvelle syntaxe pour que cela, si vous utilisez bablejs pour construire votre code. Vous pouvez utiliser computed property names
    • La deuxième approche, les causes d'erreur de syntaxe dans les navigateurs sur WIndows (IE, Chrome). Quelqu'un a un avis?
    • comment obtenir de l'énoncé?
    • Grâce trad, c'est ce que je cherchais à éviter la duplication de code pour <Radio /> mise en œuvre.
    • Si vous définissez un état à l'aide de la propriété calculée nom comme ceci: this.setState({ [event.target.id]: event.target.value }); puis comment voulez-vous accéder à cet état en utilisant this.state......?
    • Merci, cela m'a aidé aussi.
    • comment puis-je accéder à cet état de la même manière ? comme cette.de l'état([événement.cible.nom])
    • cela a fonctionné comme un charme! incroyable solution de contournement. Merci.

    InformationsquelleAutor trad
  2. 106

    Lorsque vous avez besoin de gérer de multiples contrôlée des éléments d'entrée, vous pouvez ajouter un attribut de nom à chaque élément et de laisser la fonction de gestionnaire de choisir quoi faire en fonction de la valeur de l'événement.cible.nom.

    Par exemple:

    JS:

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

    • ce qui ne les crochets autour de l' [événement.cible.nom] indiquent? Pourquoi sont-ils nécessaires?
    • Par rapport à d'habitude approche nommé chaque élément séparément comme ceci.setState({ nom d'utilisateur: adresse e.cible.valeur }); Cela permettra de gérer plusieurs éléments de formulaire sous forme de tableau et pas besoin de définir chaque élément
    • mais encore, comment puis-je accéder à cet état de la même manière ? comme this.state([event.target.name]) ?
    • C'est vrai, accessible de la même manière
    • la meilleure réponse à tous. merci
    InformationsquelleAutor vikram jeet singh
  3. 38

    Comment je l'ai accompli...

    inputChangeHandler: function(event) {
  var key = event.target.id
  var val = event.target.value
  var obj  = {}
  obj[key] = val
  this.setState(obj)
},
    • Je n'ai même façon, mais le problème était qu'il n'avait toujours pas rendu le composant, et j'ai couru pilier de la poste (y compris ce :D), et quelque part trouvé ceci: this.forceUpdate();qui ne doit pas avoir été le cas avec la dernière Réagir. Nous allons voir quel est le problème plus tard!!!!
    InformationsquelleAutor sintaxi
  4. 14

    Voulais juste ajouter, que vous pouvez également de la structuration de refactoriser le code et le rendre plus lisible.

    inputChangeHandler: function ({ target: { id, value }) {
    this.setState({ [id]: value });
},
    InformationsquelleAutor saulable
  5. 6

    En boucle avec .map fonctionne comme ceci:

    {
    dataForm.map(({ id, placeholder, type }) => {
        return <Input
            value={this.state.type}
            onChangeText={(text) => this.setState({ [type]: text })}
            placeholder={placeholder}
            key={id} />
    })
}

    Note le [] dans type paramètre.
    Espérons que cela aide 🙂

    InformationsquelleAutor Johnatan Maciel
  6. 1

    Avec ES6+ il vous suffit de faire [${variable}]

    InformationsquelleAutor Jujhar Singh
  7. -4

    Pouvez utiliser une propagation de la syntaxe, quelque chose comme ceci:

    inputChangeHandler : function (event) {
    this.setState( { 
        ...this.state,
        [event.target.id]: event.target.value
    } );
},
    • Réagir fera l'objet de la fusion pour vous, c'est une mauvaise pratique.
    • setState déjà fusionne l'état avec les nouveaux accessoires
    • fondamentalement, si vous avez quelques intérieure de l'objet et que vous souhaitez modifier une propery sur cet objet interne vous de faire comme ceci: ce.setState({selectedItems:{...selectedItems,[élément.id]:true}})
    InformationsquelleAutor sta