ReactJS: проверка не работает с Yup с использованием многошаговой формы Formik - PullRequest
Новая
       19

ReactJS: проверка не работает с Yup с использованием многошаговой формы Formik

1 голос
/ 17 мая 2019

У меня есть многошаговая форма, в которой я использовал библиотеки Formik и 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>
    )
  }


}

пожалуйста, проверьте ответ консоли реагирования для значения как пустое.

enter image description here

1 Ответ

1 голос
/ 17 мая 2019

Причина, по которой он не проверяется, заключается в том, что вы переходите к 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 prop поля, чтобы оно соответствовало проверке. 

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