Reactjs Redux表单7.4.2，如何防止组件呈现时表单提交和显示错误

Im使用，在简单表单上进行客户端验证

表单在页面加载时提交，并显示如下错误：

我想防止在页面加载时提交表单并显示错误 仅当用户单击“提交”按钮时

以下是使用reduxForm的表单组件：

import React from 'react'
import { Field, reduxForm } from 'redux-form'

const renderField = ({ input, label, type, meta: { touched, error, warning } }) => {
  console.log(error);
  return(
    <div className="form-group">
      <label>{label}</label>
        <input {...input} placeholder={label} type={type} className="form-control" />
        {error && <div className="invalid-feedback d-block">{error}</div>}

    </div>
  )
}




const validate = values => {
    const errors = {}
    if (!values.name) {
      errors.name = 'Name is Required'
    } else if (values.name.length < 2) {
      errors.name = 'Must be 2 characters or more'
    }
    if (!values.email) {
      errors.email = 'Email is Required'
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
      errors.email = 'Invalid email address'
    }
    if (!values.password) {
      errors.password = 'Password Required'
    } else if (values.password.length < 6) {
      errors.password = 'Password must be 6 characters'
    }
    return errors
  }

const Form1Child=(props)=>{
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit} className="needs-validation" noValidate>
      <Field name="name" type="text" component={renderField} label="Name"/>
      <Field name="email" type="email" component={renderField} label="Email"/>
      <Field name="password" type="password" component={renderField} label="Password"/>
      <div>
        <button className="btn btn-primary" type="submit" disabled={submitting}>Submit</button>
        <button className="btn btn-default" type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
      </div>
    </form>
  )
}

export default reduxForm({
    form: 'form1',
    validate 
  })(Form1Child)

从“React”导入React
从“redux form”导入{Field，reduxForm}
const renderField=（{input，label，type，meta:{toucted，error，warning}}）=>{
console.log（错误）；
返回(
{label}
{error&&{error}
)
}
常量验证=值=>{
常量错误={}
如果（！values.name）{
errors.name='name是必需的'
}else if（values.name.length<2）{
errors.name='必须是2个或更多字符'
}
如果（！values.email）{
errors.email='email是必需的'
}如果（！/^[A-Z0-9.%+-]+@[A-Z0-9.-]+\[A-Z]{2,4}$/i.test（values.email））{
errors.email='无效的电子邮件地址'
}
如果（！values.password）{
errors.password='password Required'
}else if（values.password.length<6）{
errors.password='密码必须为6个字符'
}
返回错误
}
const Form1Child=（道具）=>{
const{handleSubmit，pristite，reset，submiting}=props
返回(
提交
明确的价值观
)
}
导出默认reduxForm({
表格：‘表格一’，
验证
})（Form1Child）

以下是父组件：

import React, { Component } from 'react'
import Form1Child from './Form1Child';

class Form1 extends Component {
    constructor(){
        super();
        this.state={

        }
    }

    handleSubmit=values=>{
        alert(JSON.stringify(values));
    }

  render() {
    return (
      <Form1Child onSubmit={this.handleSubmit}/>
    )
  }
}
export default Form1;

import React，{Component}来自“React”
从“/Form1Child”导入Form1Child；
类Form1扩展了组件{
构造函数（）{
超级（）；
这个州={
}
}
handleSubmit=值=>{
警报（JSON.stringify（值））；
}
render（）{
返回(
)
}
}
导出默认表单1；

在验证函数中，执行以下操作：

throw new SubmissionError('There were errors.')

这将阻止行动

@@redux-form/SET_SUBMIT_SUCCEEDED

---

这是因为您没有检查字段是否脏。 在

renderField

组件中，您尚未检查字段是否被触摸

在

renderField

组件中，替换此行

{error && <div className="invalid-feedback d-block">{error}</div>}

{error&&{error}

与

{moved&&error&&{error}

---

它应该会起作用。

嗨@Saurabh，你能试试这个handleSubmit（事件）}>@Venkatesh Somu，还没起作用吗

{touched && error && <div className="invalid-feedback d-block">{error}</div>}