Redux 表单：访问 JSX 表单中的字段组件 meta.touched 属性

Question

我正在处理用户注册页面，我想让用户在输入密码后确认密码。我正在尝试访问特定字段组件的 "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)
);

Answer 1

我认为 getFormMeta 选择器可以帮助您。您可以将其添加到您的 mapStateToProps:

import { getFormMeta } from 'redux-form';

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

Docs reference

Redux 表单：访问 JSX 表单中的字段组件 meta.touched 属性

Redux Form: Getting Access to Field Components meta.touched property inside JSX Form

validation

reactjs

redux

redux-form