Reactjs 提交值后如何重置antd日期选择器?
在这里,我提供了使用codesandbox的示例。提交表单后如何重置日期选择器值Reactjs 提交值后如何重置antd日期选择器?,reactjs,gatsby,antd,formik,yup,Reactjs,Gatsby,Antd,Formik,Yup,在这里,我提供了使用codesandbox的示例。提交表单后如何重置日期选择器值 state = { setFieldValue: '' } onChange = (setFieldValue) => { this.setState({ setFieldValue: null }) } render() { const { values, handleSubmit } = this.props
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>
}
状态={
setFieldValue:“”
}
onChange=(setFieldValue)=>{
this.setState({setFieldValue:null})
}
render(){
const{values,handleSubmit}=this.props
返回(
提交
}
我的工作代码沙盒链接是您的日期选择器不是受控组件。我将其转换为受控组件,并在提交表单后重置了日期字段
setFieldValue(“dateofbirth”,日期字符串)
}
值={dateofbirth!==“”?时刻(dateofbirth):“”
/>
最好使用null
<DatePicker
onChange={(date, dateString) =>
setFieldValue("dateofbirth", dateString)
}
value={dateofbirth !== "" ? moment(dateofbirth) : null}
/>
setFieldValue(“dateofbirth”,日期字符串)
}
值={dateofbirth!==“”?时刻(dateofbirth):null}
/>