onChange 使用 Formik 验证

Question

我目前正在让我的输入值在我输入时显示在屏幕上。例如，我有一个需要名字和姓氏的表单。输入这些值后，我试图显示输入到 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>

我能够在 setState 上显示什么输入，但就像之前显示的那样。

Answer 1

您正在尝试混合两种不同的东西。 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
        ...
    }}
/>

onChange 使用 Formik 验证

onChange using Formik Validation

state

onchange

reactjs

formik