ReactJS：验证不适用于使用 Formik 多步表单的 Yup

Question

我有一个多步骤表单，其中我使用了 Formik 和 Yup 库。

但是我使用的 yup 库的验证根本不起作用。在 React 调试器工具中，我得到它的值为空。因此，无论我在输入字段中写入什么，它都会使用 "Required" 消息进行验证，因为它的值为空。

import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

let accountInfoSchema = Yup.object().shape({
  name: Yup.string()
  .max(20, 'Too Long!')
  .required('Name is Required'),
});

class AccountInfo extends Component {
 handleChange = event => {
    this.setState({    
      userAccountData: Object.assign(
        {}, 
        this.state.userAccountData,
        { [event.target.name]: event.target.value }
      ),
    })
  }

 AccountInfoView = () => {
    return (
      <section className="form">
      <React.Fragment>
        <Formik
          initialValues={{name:'' }}
          validationSchema={accountInfoSchema}
          render={() => {
          return(
        <Form onSubmit={this.handleSubmit}>
        {this.Step1()}
        {this.Step2()}
        {this.Step3()}
        <li className="stb_btn half">
          <div className="custom_group">
            {this.previousButton()}
          </div>
        </li>
        <li className="stb_btn half">
          <div className="custom_group">
            {this.nextButton()}
          </div>
        </li>
        </Form>
        );
      }}
      />
      </React.Fragment>
      </div>
    </section>
    )
  }

Step1 = () => {
return(
<li>
   <div className="custom_group">
   <Field type="text" name="name" className="trans text_input" placeholder="Enter your name" value={this.state.userAccountData['name']} onChange={this.handleChange} />
   <label className="label_two">Name</label>
   <ErrorMessage name="name" />
   </div>
 </li>
)
}

render() {    

    return (
      <div>{this.AccountInfoView()}</div>
    )
  }


}

请检查 React 控制台响应是否为空值。

Answer 1

它未验证的原因是因为您正在传递给 Field this.state.userAccountData['name'] 和 onChange={this.handleChange}。

Formik 已经有一个状态来存储您表单中的所有数据，您不需要将其保持在组件状态。

当您将 onChange={this.handleChange} 添加到该字段时，您会更改组件的状态，但不会更改 Formik 的状态，这就是未触发验证的原因。

我不确定你为什么要保留 name 状态，但如果你没有任何理由为什么这些是不必要的。

 // formik already handle the state for you inside `values`
 handleChange = event => {
    this.setState({    
      userAccountData: Object.assign(
        {}, 
        this.state.userAccountData,
        { [event.target.name]: event.target.value }
      ),
    })
  }

// Formik already handles the value and the onChange of the input
<Field type="text" name="name" className="trans text_input" placeholder="Enter your name" value={this.state.userAccountData['name']} onChange={this.handleChange} />

您唯一需要做的就是设置字段的 name 属性，使其与验证匹配。

// this is enough
<Field type="text" name="name" className="trans text_input" placeholder="Enter your name" />

ReactJS：验证不适用于使用 Formik 多步表单的 Yup

ReactJS: Validation not working with Yup using Formik multistep form

reactjs

yup

formik