1

我是 react 和 redux 世界的新手，非常感谢任何帮助。我有一个用于添加一些数据的表单。在该表单上，如果用户在提交表单之前没有在字段上输入任何值，我正在尝试验证字段。但是验证不起作用，并且正在提交空值。当我调试时，验证方法永远不会被调用。下面是我的表单：

添加产品.JS

import React from 'react';
import {Field, reduxForm} from 'redux-form';
import {connect} from 'react-redux';
import * as actions from '../../actions/product'; 

class AddProduct extends React.Component {
    
    renderInput=({input, label, type, meta: {touched, error}})=>{
        const className = `field ${error && touched ? 'error' : ''}`;
        return(
            <div className={className}>
                <label>{label}</label>
                <input{...input} placeholder={label} type={type} autoComplete="off"/>
                {touched && error && <div className="ui error message">
          <div className="header">{error}</div>
        </div>}
            </div>
        );
    }
    renderSelectField = ({ input, label, type, meta: {touched, error}, children }) => {
        const className = `field ${touched && error ? 'error' : ''}`;
        return (
        
            <div className={className}>
      <label>{label}</label>
      <div>
        <select {...input}>
          {children}
        </select>
        {touched && error && <div className="ui error message">
          <div className="header">{error}</div>
        </div>}
      </div>
    </div>
        )
    } 

    onSubmit=(formValues) =>{
        console.log(formValues)
        /*this.props.createProduct(formValues,(res)=> {
            //OnSuccess
            if(res.status === 201) {
                //Redirect to previous page
                this.props.history.goBack();
            }
        })*/
    }

    onCancel = () => {
        //Redirect to previous page
        this.props.history.goBack();
    }

    render() {
        return(
            <div className="ui one column grid">
                <div className="column">
                <div className="ui header">Please enter the information below: </div>
                <div className="form-div">
                    <form onSubmit={this.props.handleSubmit(this.onSubmit)} className="ui form error">
                        <Field name="Name" component={this.renderInput} label="Name" type="text" />
                        <Field name="Description" component={this.renderInput} label="Description" type="text"/>
                        <Field name="Price" component={this.renderInput} label="Price" type="number"/>
                        <Field name="ImageURL" component={this.renderInput} label="Image" type="text"/>
                        <Field name="CategoriesID" component={this.renderSelectField} label="Category">
                        <option></option>
                            <option value="3">Books</option>
                            <option value="4">Electronics</option>
                            <option value="5">BeautyAndHealth</option>
                        </Field>
                        
                        <button className="ui button primary" type="submit"> Create</button>
                        <button className="ui button secondary" type="button" onClick={()=> this.onCancel()} > Cancel</button>
                    </form>
                </div>
                </div>
                
                
            </div>
            
        )
    }
}

const validate = formValues => {
    const errors = {};
  
    if (!formValues.Name) {
      errors.title = 'You must enter a name.';
    }
  
    if (!formValues.Description) {
      errors.description = 'You must enter a description';
    }
    if (!formValues.Price) {
        errors.price= 'You must enter a price';
    }

    if (!formValues.ImageUrl) {
        errors.imageUrl = 'You must enter a image location.';
    }
    if (!formValues.CategoriesID) {
        errors.category = 'You must enter a category.';
    }
  
    return errors;
  };

 
const mapStateToProps = state => ({
    productList: state.product.list
});

const mapActionToProps = {
    createProduct: actions.create
}

export default connect(mapStateToProps, mapActionToProps) (reduxForm({form:'addProduct',validate})(AddProduct));

index.js

import {combineReducers} from 'redux';
import {product} from './product';
import {reducer as formReducer} from 'redux-form';

export const reducers = combineReducers({
    form: formReducer,
    product
    
})

4

0 回答 0