Reactjs 如何将withFormik字段与react datepicker一起使用？

我试图将我的dob数据从主类发送到子组件（RegisterAccount.jsx），并使用yup和withFormik字段在子组件上验证它。问题在于：

我无法使用yup或formik/yup来验证dob字段

选定日期后，DatePicker不会在文本框内显示选定值

请检查我的以下代码：

这是我的Main.jsx类

// Some imports were removed to keep everything looks cleaner
import RegisterAccount from "RegisterAccount.jsx";

class Main extends React.Component {
     constructor(props) {
          super(props);

          this.state = {
             dob: ""
          }
     }

    render() {
        return (
            <Container fluid>
              <Switch>
                <Route exact path="/" render={() => <RegisterAccount data={this.state.dob} />} />
              </Switch>
            </Container>
        )
    }
}

export default Main;

//删除了一些导入，以保持一切看起来更干净
从“RegisterAccount.jsx”导入RegisterAccount；
类Main扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
dob:“
}
}
render（）{
返回(
} />
)
}
}
导出默认主；

这是我的RegisterAccount.jsx

// Some imports were removed to keep everything looks cleaner
import { Form as FormikForm, Field, withFormik } from "formik";
import * as Yup from "yup";
import DatePicker from "react-datepicker";


const App = ({ props }) => (
  <FormikForm className="register-form  " action="">
    <h3 className="register-title">Register</h3>
    <Form.Group className="register-form-group">
      <DatePicker
         tag={Field}
         selected={props.data.dob}
         onChange={(e, val) => {
             console.log(this);
             this.value=e;
             props.data.dob = e;
             console.log(props.data.dob);
         }}
         value="01-01-2019"
         className="w-100"
         placeholderText="BIRTH DATE"
         name="dob" />
      {touched.username && errors.username && <p>{errors.username}</p>}
    </Form.Group>
  </FormikForm>
);

const FormikApp = withFormik({
  mapPropsToValues({ data }) {
    return {
      dob: data.dob || ""
    };
  },
validationSchema: Yup.object().shape({
    dob: Yup.date()
            .max(new Date())

})(App);


export default FormikApp;

//删除了一些导入，以保持一切看起来更干净
从“formik”导入{Form as FormikForm，Field，withFormik}；
从“Yup”导入*作为Yup；
从“反应日期选择器”导入日期选择器；
常量应用=（{props}）=>(
登记
{
console.log（this）；
该值=e；
props.data.dob=e；
console.log（props.data.dob）；
}}
value=“01-01-2019”
className=“w-100”
占位符text=“出生日期”
name=“dob”/>
{toucted.username&&errors.username&{errors.username}
}
);
常数FormikApp=带FORMIK({
mapPropsToValues（{data}）{
返回{
dob:data.dob | |“
};
},
validationSchema:Yup.object（）.shape({
是的，日期（）
.max（新日期（））
})（App）；
出口违约金；

使用来自福米克注入道具的

设置字段值方法

在
onChange
处理程序中为您的输入
setFieldValue（'dob'，'your Value'）
定义它

您可以从

const MyForm = props => {
  const {
    values,
    touched,
    errors,
    handleChange,
    handleBlur,
    handleSubmit,
    setFieldValue
  } = props;
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        onChange={e => {
          setFieldValue("name", "Your value"); // Access it from props
        }}
        onBlur={handleBlur}
        value={values.name}
        name="name"
      />
    </form>
  );
};
const MyEnhancedForm = withFormik({
  // your code
})(MyForm)

constmyform=props=>{
常数{
价值观
感动的，
错误，
handleChange，
车把，
手推，
setFieldValue
}=道具；
返回(
{
setFieldValue（“名称”、“您的值”）；//从道具访问它
}}
onBlur={handleBlur}
value={values.name}
name=“name”
/>
);
};
常量MyEnhancedForm=withFormik({
//你的代码
})（我的表格）

参考-