使用Formik验证的onChange

Question

I'm currently having getting my input values to appear on screen as im typing. For example, I have a form that requires a first name and last name. Upon typing in those values I am trying to display the inputs typed onto the DOM. This was successful earlier with an onChange, and using this.state.firstName, this.state.lastName. I have implemented formik validation and currently my inputs only appear after I upload an image which has a set state.

I have an onChange passing its values

     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>

I am able to show what input on a setState but live like it previously shown.

Answer 1

You're trying to mix two separate things. Formik exist so that you don't have to manage your component level form state by yourself doing so is hard and formik does that for you.

You should pass an object containing form initial field values to initialValues prop instead of this.state.formData

To update a DOM value based on a field input somewhere, you can do this

<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
        ...
    }}
/>