javascript - 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