Форма Redux: получение доступа к свойству meta.touched компонентов поля внутри формы JSX - PullRequest
Новая
       8

Форма Redux: получение доступа к свойству meta.touched компонентов поля внутри формы JSX

0 голосов
/ 28 апреля 2018

Я работаю над страницей регистрации пользователей и хочу, чтобы пользователь подтвердил свой пароль после его ввода. Я пытаюсь получить доступ к свойству meta.touched компонента определенного поля из формы jsx. У меня есть метод renderField, который я могу использовать для доступа к нему внутри этой функции, но я не могу получить к нему доступ за пределами этого. Я пытаюсь, чтобы третье поле появилось после касания компонента поля пароля. Как бы я получить доступ к этому?

например 

      <Field
          label="Please enter an email for you account"
          name="email"
          type="text"
          component={this.renderField}
        />
      <Field
          label="Please enter a password for your account"
          name="password"
          type="password"
          component={this.renderField}
        />

     {if(password.meta.touched == true) &&
           <Field
              label="Please confirm your password"
              name="passwordConfirm"
              type="password"
              component={this.renderField}
            />}

вот полный компонент: 

import React, {Component} from 'react';
import { Field, reduxForm } from 'redux-form';
import {connect} from 'react-redux';
import * as actions from '../../actions';

import '../../style/signup.css';

class SignUp extends Component {
  renderAlert(){
    if(this.props.errorMessage){
      return(
        <div className="alert alert-danger error-message">
          <strong>Oops!</strong>
          <h6 className="invalid">{this.props.errorMessage}</h6>
        </div>
      )
    }
  }

  renderField(field){
  return(
    <div className="form-group">
      <label>{field.label}</label>
      <input
        className="form-control"
        type={field.type}
        {...field.input}
      />
      <div className="invalid">
        {field.meta.touched ? field.meta.error: ''}
      </div>
    </div>
  );
}

handleFormSubmit({email, password}){
  this.props.signUpUser({email, password});
}

  render(){
    const {handleSubmit} = this.props;
    return(
      <div className="container sign-up-form jumbotron">
        <h4>Sign Up</h4>
        <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
          <Field
              label="Please enter an email for you account"
              name="email"
              type="text"
              component={this.renderField}
            />
          <Field
              label="Please enter a password for your account"
              name="password"
              type="password"
              component={this.renderField}
            />

            <Field
              label="Please confirm your password"
              name="passwordConfirm"
              type="password"
              component={this.renderField}
              />

            {this.renderAlert()}
          <button action='submit' className="btn btn-success">
            Sign Up   <i className="fas fa-user-plus"></i>
          </button>
        </form>
      </div>
    )
  }
}

function validate(values){
  //this function will be called for us
  //values is an object that has values user has entered into form
  const errors = {};
  //if errors has any properties, redux forms assumes
  //it is invalid
  if(!values.email){
    errors.email="Please enter an email to sign up";
  }
  if(!values.password){
    errors.password="Please enter a password to sign up";
  }
  if(!values.passwordConfirm){
    errors.passwordConfirm="Please confirm your password";
  }
  if(values.password !== values.passwordConfirm){
    errors.passwordConfirm="Passwords dont match, please confirm";
  }
  return errors;
}

function mapStateToProps(state){
  return {
    errorMessage: state.auth.error
  };
}

export default reduxForm({
  validate,
  form: 'signup'
})(
  connect(mapStateToProps, actions)(SignUp)
);

1 Ответ

0 голосов
/ 28 апреля 2018

Я думаю, что селектор getFormMeta поможет вам здесь. Вы можете добавить его в свой mapStateToProps: 

import { getFormMeta } from 'redux-form';

function mapStateToProps(state) {
  return {
    errorMessage: state.auth.error,
    meta: getFormMeta('signup')(state)
  };
}

Ссылка на документы

...