1

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

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

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>
    )
  }


}

请查看反应控制台响应的值是否为空。

在此处输入图像描述

4

1 回答 1

4

它不验证的原因是因为你传递给Field this.state.userAccountData['name']and 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" />
于 2019-05-17T12:00:24.123 回答