提问人:Sadia 提问时间:11/14/2023 更新时间:11/14/2023 访问量:12
使用 react 钩子和打字稿的 from date 不应大于 To date
From date should not be greater than To date using react hooks and typescript
问:
我正在进行验证,如果在“from”输入日期中输入的日期大于“ToDate”,则应该通过错误。我是将react与打字稿一起使用的新手。这是我所做的: 有两个组件文件: AdvancedSearch.tsx
const initialErrors = {
dateValidity: false,
dateErrorMsg: "test message"
};
const initialDates = {
assignedFrom: null,
assignedTo: null
};
const [errors, setErrors] = useState(initialErrors);
const [dates, setDates] = useState(initialDates);
useEffect(() => {
validateDates();
}, [dates]);
console.log(dates);
function validateDates() {
let dateErrorMsg: string = "";
let dateValidity: boolean = false;
const dateRangeCheck = new Date(dates.assignedFrom) <= new Date(dates.assignedTo);
dateErrorMsg = dateRangeCheck ? "" : "End date can't be before start date.";
dateValidity = dateRangeCheck ? false : true; // true if error - end date before start date
setErrors((prevState) => ({
...prevState,
dateValidity,
dateErrorMsg,
}));
}
在我的日期输入字段中,我是这样处理的:
<div className="row job-search-content">
<div className="col-md-2">
<label className="spg-label">Assigned/Queued From</label>
</div>
<div className="col-md-9">
<input
className="spg-input spg-input-component spg-input--medium"
type={jobSearchForm?.showTime ? 'datetime-local' : 'date'}
onChange={(event) => {
handleChange(event, 'assignedFrom', 'date');
}}
value={jobSearchForm?.assignedFrom}
></input>
<span className="validation-error">{errors.dateErrorMsg}</span>
</div>
</div>
<div className="row job-search-content">
<div className="col-md-2">
<label className="spg-label">Assigned/Queued To</label>
</div>
<div className="col-md-9">
<input
className="spg-input spg-input-component spg-input--medium"
type={jobSearchForm?.showTime ? 'datetime-local' : 'date'}
onChange={(event) => {
handleChange(event, 'assignedTo', 'date');
}}
value={jobSearchForm?.assignedTo}
></input>
</div>
</div>
现在的问题是它没有显示验证错误,因为它没有触发句柄更改事件,并且该句柄更改事件的定义位于另一个文件 Finder.tsx 中,我也在其中处理其他逻辑。所以现在请帮助我了解如何触发此句柄更改事件,因为当我在控制台日志中检查日期值时,日期值保持在以前的状态,值为 null。
const handleChange = (e, fieldName: string, role: string) => {
if (fieldName) {
setJobSearchForm((prevState) => ({
...prevState,
[fieldName]: role == 'date' ? e.target.value : e,
}));
if (fieldName == 'showTime') {
setJobSearchForm((prevState) => ({
...prevState,
assignedFrom: '',
assignedTo: '',
completedFrom: '',
completedTo: '',
}));
}-------------------------
答: 暂无答案
评论