Я пытаюсь установить дату для двух разных типов ввода. Я попытался вызвать разные функции для обоих обработчиков событий ввода, и это сработало. Но я хочу использовать более сжатый способ управления датой ввода. Другой подход, который я пробовал вызывать single onChange (), похоже, не меняет значение моего поля ввода.
Вот мой код:
import React, { Component } from "react";
import axios from "axios";
export default class DatePage extends Component {
constructor() {
super();
this.state = {
startDate: '',
endDate: '',
clicked: false
};
}
componentDidMount() {
this.setDate();
this.setState({
clicked: true
});
}
setDate = (e) => {
if (this.state.clicked !== true)
{
var date = new Date();
var newdate =
date.getFullYear() + "-" + ("0" + (date.getMonth() + 1)) + "-" + date.getDate();
this.setState({
startDate: newdate,
endDate: newdate,
clicked: false
});
}
else
{
this.setState({
[e.target.name]: e.target.value
});
}
};
render() {
return (
<div>
<label>From</label>
<input
type="date"
name="startdate"
value={this.state.startDate}
onChange={this.setDate}
/>
<label>To</label>
<input
type="date"
name="enddate"
value={this.state.endDate}
onChange={this.setDate}
/>
</div>
);
}
}
По умолчанию я устанавливаю текущую дату и меняю выбранную дату
2 ответа
Кажется, дело не в этом. Я убрал код.
Startdate to startDate enddate to endDate. Кажется, это хорошо работает, если вы измените эту часть.
import React, { Component } from "react";
export default class Datepage extends Component {
constructor() {
super();
var date = new Date();
var newdate =
date.getFullYear() + "-" + ("0" + (date.getMonth() + 1)) + "-" + date.getDate();
this.state = {
startdate: newdate,
enddate: newdate,
clicked: false
};
}
componentDidMount() {
}
setDate = (e) => {
this.setState({
[e.target.name]: e.target.value
});
};
render() {
return (
<div>
<label>From</label>
<input
type="date"
name="startdate"
value={this.state.startdate}
onChange={this.setDate.bind(this)}
/>
<label>To</label>
<input
type="date"
name="enddate"
value={this.state.enddate}
onChange={this.setDate.bind(this)}
/>
</div>
);
}
}
Вам необходимо исправить имена в форме.
Из: name="startdate"
в name="startDate"
Также здесь: name="enddate"
в name="endDate"
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.