subproperty single read react property cannot javascript reactjs computed-properties

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



setstate react (8)

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

EDITAR: este es un duplicado, mira here

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?


Con ES6 + puedes hacer [ ${variable} ]


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


En bucle con .map funciona así:

{ 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 parámetro [] en type . Espero que esto ayude :)


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


Puede usar una sintaxis extendida, algo como esto:

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


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

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


Tuve un problema similar.

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

por ejemplo, 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:

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