如何在 React js 中使用單獨的驗證表單

Question

我是 ReactJS 的新手。

我想從這個文件中分離驗證代碼並將其移動到一個處理驗證的新文件中。

當我嘗試從渲染方法發送道具時，它顯示驗證三到四次。 我知道這不是正確的方法。

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

您需要做的就是創建文件並在該文件中創建 function。 這個問題有一個解釋它的答案

如何在本機反應中創建充滿功能的幫助文件？

你需要創建文件validation.js

然后

export function validation(e){
//your code

}

然后像這樣將它導入您當前擁有的文件中

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