Reactjs setState () mit einem dynamischen Schlüsselnamen?

EDIT: Dies ist ein Duplikat, siehe hier

Ich kann keine Beispiele für die Verwendung eines dynamischen Schlüsselnamens beim Festlegen des Status finden. Folgendes möchte ich tun:

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

Dabei wird event.target.id als zu aktualisierender Statusschlüssel verwendet. Ist das in React nicht möglich?

Dank des Hinweises von @ Cory habe ich Folgendes verwendet:

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

    this.setState( stateObject );    
},

Wenn Sie ES6 oder den Babel-Transpiler zum Transformieren Ihres JSX-Codes verwenden, können Sie dies auch mit berechneten Eigenschaftsnamen erreichen :

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 });
}

Wenn Sie mehrere gesteuerte Eingabeelemente verarbeiten müssen, können Sie jedem Element ein Namensattribut hinzufügen und die Handlerfunktion basierend auf dem Wert von event.target.name auswählen lassen, was zu tun ist.

Beispielsweise:

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

Wie ich das geschafft habe ...

inputChangeHandler: function(event) {
  var key = event.target.id
  var val = event.target.value
  var obj  = {}
  obj[key] = val
  this.setState(obj)
},

Ich wollte nur hinzufügen, dass Sie auch die De-Strukturierung verwenden können, um den Code umzugestalten und ihn übersichtlicher aussehen zu lassen.

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

Im Einklang mit dieser .mapArbeit:

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

Beachten Sie die []in typeParameter. Hoffe das hilft :)

Ich hatte ein ähnliches Problem.

Ich wollte den Status festlegen, in dem der Schlüssel der 2. Ebene in einer Variablen gespeichert ist.

z.B this.setState({permissions[perm.code]: e.target.checked})

Dies ist jedoch keine gültige Syntax.

Ich habe den folgenden Code verwendet, um dies zu erreichen:

this.setState({
  permissions: {
    ...this.state.permissions,
    [perm.code]: e.target.checked
  }
});

Mit ES6 + können Sie einfach [ ${variable}]

Ich suchte nach einer hübschen und einfachen Lösung und fand diese:

this.setState({ [`image${i}`]: image })

Hoffe das hilft

this.setState({ [`${event.target.id}`]: event.target.value}, () => {
      console.log("State updated: ", JSON.stringify(this.state[event.target.id]));
    });

Bitte beachten Sie das Anführungszeichen.

Ihr Status mit Wörterbuch aktualisiert einige Schlüssel, ohne anderen Wert zu verlieren

state = 
{   
    name:"mjpatel"  
    parsedFilter:
    {
      page:2,
      perPage:4,
      totalPages: 50,
    }
}

Lösung ist unten

 let { parsedFilter } = this.state
 this.setState({
      parsedFilter: {
        ...this.state.parsedFilter,
        page: 5
      }
  });

hier Wert für Schlüssel "Seite" mit Wert 5 aktualisieren

Kann eine Spread-Syntax verwenden, etwa so:

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