Как передать параметр из одного компонента в другой в Formik? - PullRequest
Новая
       9

Как передать параметр из одного компонента в другой в Formik?

1 голос
/ 23 января 2020

У меня есть мой Formik, как показано ниже: 

<Formik
  validationSchema={schema}
  onSubmit={this.handleSubmit}
  initialValues={this.state}
  values={this.state}
  onChange={this.handleChange}
 >
 {({
    handleSubmit,
    handleChange,
    handleBlur,
    values,
    touched,
    isValid,
    errors
  }) => (
  .....
  <Form noValidate onSubmit={handleSubmit}>
   <Form.Row>
    <Form.Group as={Col} controlId="validationFormik01">
     <Form.Control
       type="text"
       placeholder="Username"
       name="username"
       value={values.username}
       onChange={handleChange}
       isInvalid={touched.username && errors.username}
     />
    <Form.Control.Feedback type="invalid">
     {errors.username}
    </Form.Control.Feedback>
   </Form.Group>
  </Form.Row>
  .....
  <ShowPassword /> // ---> the new component
</Formik>

И затем я создал другой компонент с вводом и кнопкой для пароля, чтобы включить или выключить его следующим образом: 

class ShowPassword extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        active: false,
        type: 'password',
    };
    this.toggleButton = this.toggleButton.bind(this);
}
toggleButton() {
    const currentState = this.state.active;
    this.setState({active: !currentState});
    if(currentState) {
        this.setState({type: 'password'});
    } else {
        this.setState({type: 'text'})
    }
}

render() {
    return(
      <Form.Row>
       <Form.Group as={Col} controlId="validationFormik05">
        <InputGroup >
          <Form.Control
            type={this.state.type}
            placeholder="Confirm Password"
            name="confirmpassword"
            value={this.state.confirmpassword}
          isInvalid={touched.confirmpassword && errors.confirmpassword} //--->this one
           />
          <InputGroup.Append>
            <button className="showPassword" onClick={this.toggleButton} type="button" 
             variant="outline-secondary">
             <i className={this.state.active ? 'pi pi-eye' : 'pi pi-eye-slash'} aria-hidden="true"> 
             </i>
            </button>
          </InputGroup.Append>
         <Form.Control.Feedback type="invalid">
            {errors.confirmpassword} // ---> this one
         </Form.Control.Feedback>
                </InputGroup>
            </Form.Group>
        </Form.Row>
     )
   }
 }

Итак, дело в том, что в компоненте <ShowPassword /> есть некоторые параметры, которые не определены из-за области действия. Есть ли способ передать эти параметры из родительского Formik в дочерний компонент?

1 Ответ

0 голосов
/ 23 января 2020

Вы должны использовать connect.

Как сказано в документации

connect() - это компонент более высокого порядка (Ho C) это позволяет вам подключить что-либо к контексту Formik. Он используется внутри для создания и, но вы можете использовать его для создания новых компонентов по мере изменения ваших потребностей.

При упаковке вашего компонента с connect

export default connect(ShowPassword)

You получит this.props.formik со всеми реквизитами формика.

например 

<Form.Control.Feedback type="invalid">
    {this.props.formik.errors.confirmpassword} // ---> this one
</Form.Control.Feedback>

и 

export default connect(ShowPassword)
...