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