前端 - 请教一下 react给表单里面的日期组件做校验 应该怎么处理 ？？

Question

这里rules加了必传的校验 并没有什么效果 如果把name加到Form.Item标签上 就是我选择完还是处于校验状态 这种可循环的清空 应该怎么去处理才行
代码跟图放在下面了

  <Form.Item label={`选择时间范围`} rules={[{ required: true }]}>
          <div className="timeFlex">
            {[...Array(numRanges)].map((_, i) => (
              <RangePicker
                key={i}
                name={`template_time_${i}`}
                value={values[i]}
                disabledDate={disabledDate}
                onChange={(val) => {
                  setValue(i, val);
                }}
                onOpenChange={onOpenChange}
                changeOnBlur
              />
            ))}
            {+numRanges < 3 && (
              <div className="time_item" onClick={handleAdd}>
                + 添加时间范围
              </div>
            )}
          </div>
        </Form.Item>

Answer 1

你的写法是不对的，Form.Item应该直接包裹住表单组件（select、input、datepicker等），如果你要像你当前这样写的话，那你需要手动去绑定onchange事件，不然它这个表单是获取不到表单值的。具体你可以看一下要求文档：https://4x.ant.design/components/form-cn/#components-form-dem...，而且看你的当前写法，你这个是需要支持自增填写表单，你也可参照官方的https://4x.ant.design/components/form-cn/#components-form-dem...，换成这样的方式