Question

我有一个要求，我必须验证react-js单个组件中不同选项卡中的多种形式（模式）。当用户单击“添加”图标时，每个选项卡都具有“添加”图标，它将打开一个模式窗口（由表单组成）。我必须验证该表格并提交。提交工作正常，但在这里我很困惑如何在此处使用redux-form进行验证。任何人都可以帮忙，这是验证多种表格的最佳方法？预先感谢。

Answer 1

我们可以在redux-form中处理不同的提交和验证，这是一个示例

redux-form Example

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
/*------- connect redux with redux --------*/
import { connect } from 'react-redux';
/*------- action which all data to data base --------*/
import { addMessage } from './actions'
/*------- redux form --------*/
import { Field, reduxForm } from 'redux-form';
 
class Form extends Component {
 
   //PRISTINE / DIRTY // TOUCHED / ERROR : events in redux-form
 
/*------- renderInputField  --------*/
   renderInputField(field){
       const className = `form-input ${field.meta.touched && field.meta.error ? 'has-error':''}`;
       return (
           <div className={className}>
               <label>{field.myLabel}</label>
               <input type="text" {...field.input}/>
               <div className="error">
                   {field.meta.touched ? field.meta.error:''}
               </div>
           </div>
       )
   }
/*------- renderTextareaField  --------*/
   renderTextareaField(field){
       const className = `form-input ${field.meta.touched && field.meta.error ? 'has-error':''}`;
       return(
           <div className={className}>
               <label>{field.myLabel}</label>
               <textarea
                   {...field.input}
               ></textarea>
                <div className="error">
                   {field.meta.touched ? field.meta.error:''}
               </div>
           </div>
       )
   }
 
/*------- onSubmit() : runs on submit  --------*/
   onSubmit(values){
 
       this.props.addMessage(values,()=>{
 
       })
   }
 
 
   render(){
       return(
           <div className="Form">
               <div className="top">
                   <h3>Add a Message</h3>
                   <Link to="/">Back</Link>
               </div>
               <form onSubmit={this.props.handleSubmit((event)=>this.onSubmit(event))}>
 
                   <Field
                       myLabel="Enter Title"
                       name="title"
                       component={this.renderInputField}
                   />
 
                   <Field
                       myLabel="Enter name"
                       name="from"
                       component={this.renderInputField}
                   />
 
                   <Field
                       myLabel="Enter message"
                       name="message"
                       component={this.renderTextareaField}
                   />
 
 
                   <button type="submit">Submit</button>
 
               </form>
           </div>
       )
   }
}
/*------- validate() : validates our form  --------*/
 
 
function validate(values){
   const errors = {};
 
   if(!values.title){
       errors.title = "The title is empty"
   }
 
   if(!values.from){
       errors.from = "The from is empty"
   }
 
   if(!values.message){
       errors.message = "The error is empty"
   }
 
   return errors;
}
   /*------- it returns messages when action is called and state going to change  --------*/
 
function mapStateToProps(state){
   console.log(state)
   return {
       success: state.data
   }
}
 
   /*------- reduxForm : connects redux-form with react form   --------*/
 
export default reduxForm({
   validate,
   form:'PostMessage'
})(
   connect(mapStateToProps,{addMessage})(Form)
)

在多个选项卡中进行redux-from验证

1 个答案:

我们可以在redux-form中处理不同的提交和验证，这是一个示例