[英]How to reset antd datepicker after submiting a value?
here i am providing my sample example working on codesandbox. 在这里,我提供了在codeandbox上工作的示例示例。 How to reset a datepicker value after submitting a form? 提交表格后如何重设datepicker值?
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>
}
my working codesandbox link is enter link description here 我的工作代码和框链接是在此处输入链接说明
Your Datepicker is not a controlled component. 您的Datepicker不是受控组件。 I converted it to a controlled component and date field was reset post form submission. 我将其转换为受控组件,并且在提交表单后重置了日期字段。
<DatePicker onChange={(date, dateString) => setFieldValue("dateofbirth", dateString) } value={dateofbirth !== "" ? moment(dateofbirth) : ""} />
Instead of adding empty strings as it raises a propType error its best to use null
与其添加空字符串(因为它会引发propType错误),不如最好使用null
<DatePicker
onChange={(date, dateString) =>
setFieldValue("dateofbirth", dateString)
}
value={dateofbirth !== "" ? moment(dateofbirth) : null}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.