Buen día a todos,
Tengo un pequeño proyecto personal y lo estoy haciendo con React.js, aunque apenas lo acabo de aprender hace una semana. Estoy intentando tomar los valores de un input al momento de que este cambie de valor, luego este valor se almacena en un state del componente. Tengo un problema con un input date, al seleccionar una fecha, el objeto que se almacena en el state es distinto al que selecciono.
Por ejemplo si selecciono 1/11/2021, la fecha que se almacena es 31/10/2021 19:00:00. en la siguiente imagen pueden ver que el input 'Fecha de Desembolso' está seleccionado 1/11/2021, pero la fecha que aparece en el state es 'Sun Oct 31 2021 19:00:00 GMT-0500 (hora estándar de Perú)'
El input que renderiza es el siguiente.
Luego que renderiza el input, y hago un cambio en el input este se guarda en el state mediante esta función.
¿Por qué toma otra fecha?
Adjunto mi código, solo una parte, porque es muy extenso.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
prestamo: "",
plazo: "",
unidadPlazo: "",
gastoInicial: "",
gastoCuota: "",
formaPago: "",
diapago1: 1,
diapago2: 0,
tasa: "",
tipoTasa: "",
fechaDesembolso: "",
fechaCuota1: "",
showMesesEspeciales: false,
showResult: false,
mesesEspeciales: {
enero: 1,
febrero: 1,
marzo: 1,
abril: 1,
mayo: 1,
junio: 1,
julio: 1,
agosto: 1,
setiembre: 1,
octubre: 1,
noviembre: 1,
diciembre: 1,
},
mesesEspecialesQ: {
enero: 1,
febrero: 1,
marzo: 1,
abril: 1,
mayo: 1,
junio: 1,
julio: 1,
agosto: 1,
setiembre: 1,
octubre: 1,
noviembre: 1,
diciembre: 1,
},
};
this.handleFechaDesembolso = this.handleFechaDesembolso.bind(this);
this.handleFechaCuota = this.handleFechaCuota.bind(this);
}
handleFechaDesembolso(e) {
this.setState({
fechaDesembolso: new Date(e.target.value),
});
}
handleFechaCuota(e) {
this.setState({
fechaCuota1: new Date(e.target.value),
});
}
render() {
return (
<main>
<div className="fecha-desembolso">
<label htmlFor="fecha-desembolso">Fecha de Desembolso *</label>
<input
type="date"
name="fecha-desembolso"
id="fecha-desembolso"
defaultValue={this.state.fechaDesembolso}
onChange={this.handleFechaDesembolso}
/>
</div>
<div className="fecha-cuota-1">
<label htmlFor="fecha-cuota-1">Fecha de 1° cuota</label>
<input
type="date"
name="fecha-cuota-1"
id="fecha-cuota-1"
defaultValue={this.state.fechaCuota1}
onChange={this.handleFechaCuota}
/>
</div>
</main>
);
}
}