如何在 React JS 中使用单独的验证表单

Question

我是 ReactJS 的新手。

我想将验证代码从该文件中分离出来，并将其移动到处理验证的新文件中。

当我尝试从 render 方法发送道具时，它显示了三四次验证。我知道这不是正确的方法。

import React from 'react';
import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
import { NotificationManager } from 'react-notifications';
import {AddService} from '../../api/service'
import { CSelect } from '@coreui/react';
import Validation from '../validation/service'

class AddEditForm extends React.Component {

    state = {
        id: '',
        name: '',
        description: '',
        duration:'',
        price: '',
        validation : false,
    }

    onChange = e => {
        this.setState({ [e.target.name]: e.target.value })
    }

    submitFormAdd = async(e) => {
        e.preventDefault ()
        await this.Validation()
        if (this.state.validation == true) {
        //API
        }
    }

    submitFormEdit = async(e) => {
        e.preventDefault ()
        await this.Validation()
        if (this.state.validation == true) {
            //API
        }
    }

// VALIDATION FILE

    Validation = (e) => {

        let isnum = /^\d+$/.test(this.state.price);
        if (!this.state.name) {
            NotificationManager.error('Please Enter Service Name', 'Info', 2000)
            return false;
        }
        if (!this.state.description) {
            NotificationManager.error('Please Enter Description', 'Info', 2000)
            return false;
        }
        if (!this.state.price) {
            NotificationManager.error('Please Phone price', 'Error', 2000)
            return false
        }
        if (!this.state.duration) {
            NotificationManager.error('Please Service Duration', 'Error', 2000)
            return false
        }
        if (isnum !== true) {
            NotificationManager.error('Please Enter Price in Number', 'Error', 2000)
            return false
        }
        else {
           this.setState({validation : true})
        }
    }

    componentDidMount() {
        if (this.props.item) {
            const { id, name, description, price, duration } = this.props.item
            this.setState({ id, name, description, price, duration })
        }
    }

    render() {
        return (
            <Form onSubmit={this.props.item ? this.submitFormEdit : this.submitFormAdd}>
                <FormGroup>
                    <Label for="name">Name</Label>
                    <Input type="text" name="name" id="name" onChange={this.onChange} value={this.state.name === null ? '' : this.state.name} />
                </FormGroup>
                <FormGroup>
                    <Label for="description">Description</Label>
                    <Input type="text" name="description" id="description" onChange={this.onChange} value={this.state.description === null ? '' : this.state.description} />
                </FormGroup>
                <FormGroup>
                    <Label for="price">Price</Label>
                    <Input type="price" name="price" id="price" onChange={this.onChange} value={this.state.price === null ? '' : this.state.price} />
                </FormGroup>
                <FormGroup>
                    <Label for="duration">Duration</Label>
                    <CSelect custom size="lg" name="selectLg" id="selectLg" value={this.state.duration} onChange={(e) => this.setState({duration : e.target.value})}>
                      <option value="">Select Duration</option>
                      <option value="3 Months">3 Months</option>
                      <option value="6 Months">6 Months</option>
                      <option value="1 year">1 year</option>
                      <option value="2 year">2 year</option>
                      <option value="4 year">4 year</option>
                    </CSelect>
                </FormGroup>
                <Button>Submit</Button>
            </Form>
        );
    }
}

export default AddEditForm

我想在单独的文件中进行表单验证并通过 prop:

Validation = (e) => {

        let isnum = /^\d+$/.test(this.state.price);
        if (!this.state.name) {
            NotificationManager.error('Please Enter Service Name', 'Info', 2000)
            return false;
        }
        if (!this.state.description) {
            NotificationManager.error('Please Enter Description', 'Info', 2000)
            return false;
        }
        if (!this.state.price) {
            NotificationManager.error('Please Phone price', 'Error', 2000)
            return false
        }
        if (!this.state.duration) {
            NotificationManager.error('Please Service Duration', 'Error', 2000)
            return false
        }
        if (isnum !== true) {
            NotificationManager.error('Please Enter Price in Number', 'Error', 2000)
            return false
        }
        else {
           this.setState({validation : true})
        }
    }

Answer 1

您需要做的就是创建文件并在该文件中创建一个函数。这个问题有一个解释它的答案

您需要创建文件 validation.js

然后

export function validation(e){
//your code

}

然后像这样将其导入到您当前拥有的文件中

import {validation} from './utils/validation'

如何在 React JS 中使用单独的验证表单

how to use separate validation form in react js

javascript

typescript

reactjs

react-fullstack