EDITAR: esto es un duplicado, ver 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 la clave de estado que se actualizará. ¿Esto no es posible en React?
Gracias a la sugerencia 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 propiedad computados :
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 según el valor de event.target.name.
Por ejemplo:
inputChangeHandler(event) { this.setState({ [event.target.name]: event.target.value }); }Como logré esto...
inputChangeHandler: function(event) { var key = event.target.id var val = event.target.value var obj = {} obj[key] = val this.setState(obj) },