Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DateInputRange]: 在表单中使用DateInputRange,清除日期,表单值仍在 #806

Closed
xingyuefeng opened this issue May 9, 2022 · 1 comment

Comments

@xingyuefeng
Copy link
Member

注意:根据下面内容复现错误问题,以方便测试。

错误复现

选择日期再清除,表单仍有值

示例

import React from 'react';
import ReactDOM from 'react-dom';
import { DateInput,DateInputRange, Notify, Button, Form, Row, Col } from 'uiw';

function Demo(){
  const form = React.useRef(null)

  const resetDateRange = () => {
    form.current.resetForm()
  }

  const setDateRange = () => {
    form.current.setFields({dateRange:[new Date(),new Date()]})
  }

  return (
    <Form
      ref={form}
      onSubmit={({ initial, current }) => {
        if (current.dateRange) {
          Notify.success({
            title: '提交成功!',
            description: `表单提交时间成功,时间为:${current.dateRange}`,
          });
        } else {
          Notify.error({
            title: '提交失败!',
            description: `表单提交时间成功,时间为:${current.dateRange},将自动填充初始化值!`,
          });
        }
      }}
      fields={{
        dateRange: {
          initialValue: ['2019/02/17', '2019/02/20'],
          labelClassName: 'fieldLabel',
          labelFor: 'date-inline',
          children: <DateInputRange datePickerProps={{ todayButton: '今天' }} id="date-inline" />
        },
      }}
    >
      {({ fields, state, canSubmit }) => {
        return (
          <div>
            <Row>
              <Col style={{ width: 200 }} fixed>{fields.date}</Col>
            </Row>
            <Row style={{ width: 200 }} >
              <Col fixed>{fields.dateRange}</Col>
            </Row>
            <Row gutter={10}>
              <Col>
                <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
                <Button onClick={resetDateRange} >重置</Button>
                <Button onClick={setDateRange}>setValue</Button>
              </Col>
            </Row>
          </div>
        )
      }}
    </Form>
  )
}

ReactDOM.render(<Demo />, _mount_);

对您期望发生的事情进行清晰简洁的描述。

截图

image

@nullptr-z
Copy link
Collaborator

@xingyuefeng 已修复

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants