Reactjs 使用Formik验证的onChange

我目前正在让我的输入值显示在屏幕上的im键入。例如，我有一个表单需要名字和姓氏。在输入这些值时，我试图显示输入到DOM中的输入。早些时候，通过onChange并使用This.state.firstName、This.state.lastName，这是成功的。我已经实现了formik验证，目前我的输入只在我上传一个具有设置状态的图像后出现

我有一个onChange传递它的值

     handleChange = event => {
     this.setState({ [event.target.name]: event.target.value });
     };      
      <---->
       <Formik
        initialValues={this.state.formData}
        enableReinitialize={true}
        validationSchema={userProfileValidation}
        onSubmit={this.handleSubmit}
        render={formikProps => (
          <div className="container-fluid">
            <div className="edit-profile">
              <div className="row">
                <div className="col-lg-4">
                  <div className="card">
                    <div className="card-header">
                      <h3 className="card-title">My Profile</h3>
                    </div>
                    <div className="card-body">
                      <div className="row mb-2">
                        <div className="col-auto">
                          <img
                            className="img-90 rounded-circle"
                            alt=""
                            src={
                              this.state.formData.avatarUrl
                                ? this.state.formData.avatarUrl
                                : "https://iupac.org/wp- 
                 content/uploads/2018/05/default-avatar.png"
                            }
                          />
                        </div>
                        <div className="col">
                          <h4 className="mb-1">
                            {this.state.formData.firstName} {""}{" "}
                            {this.state.formData.mi} {""}{" "}
                            {this.state.formData.lastName}{" "}
                          </h4>
                        </div>
                      </div>
                    </div>
                  </div>

handleChange=event=>{
this.setState（{[event.target.name]：event.target.value}）；
};      
(
我的个人资料
{this.state.formData.firstName}{'}{'}
{this.state.formData.mi}{'}{'}}
{this.state.formData.lastName}{”“}

---

我能够显示setState上的输入，但与之前显示的一样。

您试图混合两种不同的内容。Formik的存在使您不必自己管理组件级表单状态。这样做很难，而Formik会为您做到这一点

您应该将包含表单初始字段值的对象传递给

initialValues

prop，而不是

this.state.formData

要根据某个地方的字段输入更新DOM值，可以执行以下操作

<Field
    name="email"
    type="email"
    onChange={e => {
        // call the built-in handleChange for formik
        handleChange(e)
        // and do something about e
        let someValue = e.currentTarget.value
        this.updateEmailField(someValue) // Update a DOM element on this function
        ...
    }}
/>

{
//为formik调用内置handleChange
手变（e）
//对e做点什么
让someValue=e.currentTarget.value
this.updateEmailField（someValue）//更新此函数上的DOM元素
...
}}
/>

我也面临同样的问题，但不知道如何解决。你能看看这里吗？