Reactjs setState () con un nombre de clave dinámica?

EDITAR: este es un duplicado, mira aquí

No puedo encontrar ningún ejemplo del uso de un nombre de clave dinámica al configurar el estado. Esto es lo que quiero hacer:

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

donde event.target.id se usa como clave de estado para actualizar. ¿No es esto posible en React?

Gracias a la pista de @ Cory, usé esto:

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

    this.setState( stateObject );    
},

Si usa ES6 o el transpilador de Babel para transformar su código JSX, también puede lograr esto con nombres de propiedades calculados :

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

Cuando necesite manejar múltiples elementos de entrada controlados, puede agregar un atributo de nombre a cada elemento y dejar que la función del controlador elija qué hacer en función del valor de event.target.name.

Por ejemplo:

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

Cómo logré esto ...

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

Solo quería agregar, que también puede usar la desestructuración para refactorizar el código y hacer que se vea más ordenado.

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

En sintonía con un .maptrabajo como este:

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

Tenga []en cuenta el typeparámetro in . Espero que esto ayude :)

Tuve un problema similar.

Quería establecer el estado de dónde se almacenaba la clave de segundo nivel en una variable.

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

Sin embargo, esta no es una sintaxis válida.

Usé el siguiente código para lograr esto:

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

Con ES6 + puedes simplemente hacer [ ${variable}]

Estaba buscando una solución bonita y simple y encontré esto:

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

Espero que esto ayude

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

Por favor, tenga en cuenta el carácter de la cita.

Su estado con el diccionario actualiza alguna clave sin perder otro valor

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

La solución está debajo

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

aquí actualice el valor para la "página" clave con el valor 5

Puede usar una sintaxis extendida, algo como esto:

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