提交值后如何重置antd datepicker？答案

【问题标题】：How to reset antd datepicker after submiting a value?提交值后如何重置antd datepicker？
【发布时间】：2019-02-28 07:54:18
【问题描述】：

在这里，我提供了我在代码沙盒上工作的示例示例。提交表单后如何重置日期选择器值？

    state = {
        setFieldValue: ''
    }

    onChange = (setFieldValue) => {
        this.setState({ setFieldValue: null })
      }


    render() {
        const { values, handleSubmit } = this.props
        return (
            <div align="center">
                <Form onSubmit={handleSubmit}>

                             <Field
                                name="dateofbirth"
                                label="dateOfBirth"
                                component={DateInput}
                                formitemlayout={formItemLayout}
                                value={this.state.setFieldValue}
                                onChange={this.onChange}


                            />


                            <Button type="primary" 
          htmlType="submit">Submit</Button>
}

我的工作代码框链接是enter link description here

【问题讨论】：

How to set and get a datepicker value using antd with formik?的可能重复

标签： reactjs gatsby antd formik yup

【解决方案1】：

最好使用null，而不是添加空字符串，因为它会引发 propType 错误。

<DatePicker
  onChange={(date, dateString) =>
    setFieldValue("dateofbirth", dateString)
  }
  value={dateofbirth !== "" ? moment(dateofbirth) : null}
/>

【讨论】：

【解决方案2】：

您的日期选择器不是受控组件。我将其转换为受控组件，并在表单提交后重置日期字段。

<DatePicker
  onChange={(date, dateString) =>
    setFieldValue("dateofbirth", dateString)
  }
  value={dateofbirth !== "" ? moment(dateofbirth) : ""}
/>

Codesandbox link

【讨论】：