redux-form 的 `meta : { touched, error }` 在哪里？当 renderField 范围不包含时我可以访问它吗？

Question

redux-form documentation 建议我像这样呈现我的输入和提交验证错误。

const renderField = ({ input, placeholder, className, type, meta: { touched, error } }) => (
      <div>
        <input {...input} className={className} placeholder={placeholder} type={type}/>
        {touched && error && <span><font color="red">{error}</font></span>}
      </div>
  )

在 render(){return(<form> </form>)} 中，您应该像这样创建输入（注意下一个代码行中的 component={renderField}）：

<Field type="password" placeholder="password" className="form-control" component={renderField} name="password"/>

我想对此进行自定义，以便更好地适应我自己的工作。但是我似乎无法找到一种方法来定位触摸和错误，除非我将组件放在 renderField 中，我想我仍然缺少一些重要的知识。这些 meta: {touched, error} 属性到底在哪里，我是否可以在某个地方访问它们？

下面是我的整个容器文件，供您参考。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from "redux-form"
import Title from "../components/Title.js"

const renderField = ({ input, placeholder, className, type, meta: { touched, error } }) => (
      <div className={"" + touched && error && "input_error_border"}>
        <input {...input} className={className} placeholder={placeholder} type={type}/>
        {touched && error && <span><font color="red">{error}</font></span>}
      </div>
)

class RegisterForm extends React.Component {
    constructor(props) {
        super(props);
        this.props = props;
    }
    is_registered(){
        if(this.props.user.server && this.props.user.insert){
            return (<div>
                    <p>Thank you for registering {this.props.user.first_name}</p>
                    <p>You will recieve an email with further instructions shortly.</p>
                </div>)
        }else{
            return <div></div>
        }
    }

    render() {
        const { handleSubmit } = this.props
        console.log(this.props)
        return (
            <form onSubmit={ handleSubmit } className="box-sizing mx-auto max_vertical_form_400">
                    <Title innerH="Register New User"/>
                    <div className="input-group-btn">
                        {this.is_registered()}
                    </div>
                    <div className="form-group">
                        <Field type="text" placeholder="first name" className="form-control" component={renderField} name="first_name" />
                        <Field type="text" placeholder="last name" className="form-control" component={renderField} name="last_name" />
                    </div>
                    <div className="form-group">
                        <Field type="text" placeholder="email" className="form-control" component={renderField} name="email"/>
                    </div>
                    <div className="form-group">
                        <Field type="text" placeholder="company" className="form-control" component={renderField} name="company"/>
                        <Field type="text" placeholder="department" className="form-control" component={renderField} name="department"/>
                    </div>
                    <div className="form-group">
                        <Field type="password" placeholder="password" className="form-control" component={renderField} name="password"/>
                        <Field type="password" placeholder="repeat password" className="form-control" component={renderField} name="password_repeated"/>
                    </div>
                    <div className="input-group-btn">
                        <button type="submit" className="btn btn-primary">Submit</button>
                    </div>
                    {/* <RegisterFormContainer />
                    <ThemeContainer /> */}
            </form>
        );
    }
}
function validate(values){
    const errors= {};
    if(!values.password) errors.password = "missing password";
    if (!values.email) {
        errors.email = 'Required'
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
        errors.email = 'Invalid email address'
    }
    return errors;
}

RegisterForm = reduxForm({
    form: "register_user_form",
    validate
})(RegisterForm)

function mapStateToProps({ user }) {
    return { user };
}

export default RegisterForm = connect(mapStateToProps, null)(RegisterForm)

Answer 1

您可以使用 redux-form selectors，特别是 getFormMeta 来了解哪些字段是 dirty 或 touched 和 getFormSyncErrors 来了解哪些字段具有错误。

在您的代码中，您需要更改以导入选择器

import { getFormMeta, getFormSyncErrors } from 'redux-form';

将其添加到您的 mapStateToProps 中，它可能如下所示：

function mapStateToProps(state) {
    return { 
      user: state.user, 
      metaForm: getFormMeta('register_user_form')(state),
      formSyncErrors: getFormSyncErrors('register_user_form')(state),
    };
}

然后您可以在您的组件中引用 this.props.metaForm 和 this.props.formSyncErrors

redux-form 的 `meta : { touched, error }` 在哪里？当 renderField 范围不包含时我可以访问它吗？

Where does redux-form's `meta : { touched, error }` live? Could I access it when not contained by renderField scope?

javascript

jsx

redux-form