Tengo un formulario que con un combobox que al seleccionar una opción la voy a modificar, por lo que creo una copia del objeto seleccionado en otra variable, las modificaciones que hago, las hago a la copia y luego actualizo el elemento en cuestión. Pero, quería hacer esto desde una función, en la que al editar uno de los inputs con nombre o Id "nombreProducto" yo ir a buscar al objeto del json el elemento nombreProducto y asignarle el valor que corresponda y así sucesivamente para los demás elementos, la manera en la que lo intento es:
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = {
productos: [
{ id: "1", nombreProducto: "Tennis", costoProducto: 0, estado: false },
{ id: "2", nombreProducto: "Camisa", costoProducto: 0, estado: false },
{ id: "3", nombreProducto: "Fajas", costoProducto: 0, estado: false }
],
producto: { id: "", nombreProducto: "", costoProducto: 0, estado: false }
};
this.handleDropdown = this.handleDropdown.bind(this);
this.handleDropDownState = this.handleDropDownState.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
}
handleDropdown(event) {
const objetoSeleccionado = event.target.value;
if (!(objetoSeleccionado === null || objetoSeleccionado === undefined)) {
const objeto = this.state[event.target.name].find(
objeto => objeto.id === objetoSeleccionado
);
this.setState(
{
producto: objeto
},
() => {
console.log(this.state.producto);
}
);
}
}
handleInputChange(event) {
const nombreElemento = event.target.name;
if (!(nombreElemento === null || nombreElemento === undefined)) {
this.setState(
{ [this.state.producto[nombreElemento]]: event.target.value },
() => {
console.log(this.state.producto);
}
);
}
}
handleDropDownState(event) {
if (!(event.target.name === null || event.target.name === undefined)) {
let producto = this.state.producto;
producto.estado = event.target.checked;
this.setState({ [event.target.name]: producto });
this.setState({
[this.state.productos.map(
productoFinal => productoFinal.id === producto.id
)]: [producto]
});
console.log(this.state);
}
}
render() {
return (
<div>
<select name="productos" onChange={e => this.handleDropdown(e)}>
{this.state.productos.map((p, i) => {
return (
<option key={i} value={p.id}>
{p.nombreProducto}
</option>
);
})}
</select>
<br />
<label htmlFor="nombreProducto">
Nombre del Producto:{" "}
<input
id="nombreProducto"
name="nombreProducto"
onChange={this.handleInputChange}
/>
</label>
</div>
);
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
Pero esto me no me actualiza el state, es más haciendo debug, veo que cuando hago esto: [this.state.producto[nombreElemento]]
retorna undefined, asumo que lo estoy haciendo mal.
Gracias de antemano.