使用 react 钩子和打字稿的 from date 不应大于 To date

From date should not be greater than To date using react hooks and typescript

提问人:Sadia 提问时间:11/14/2023 更新时间:11/14/2023 访问量:12

问:

我正在进行验证,如果在“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: '',
        }));
      }-------------------------

enter image description here

日期时间 验证 react-hooks react-typescript

评论


答: 暂无答案