как выполнить проверку пользовательской формы в React Js - PullRequest
0 голосов
/ 08 июля 2020

Я пробовал использовать formik, затем yup для проверки моей формы, но она не проверяется, поэтому я подумал, могу ли я просто использовать обычную функцию для проверки полей. Итак, как я могу проверить эту форму перед отправкой, потому что она использует форму мастер

import React, { Component } from 'react';
import { Steps, Form, Input, Button,Upload } from 'antd'

class BasicInfo extends Component {
    continue = e => {
        e.preventDefault();
        this.props.nextStep();
    }
    render() {
        const { firstName,handleChange, current } = this.props;
        const { Step } = Steps;
    
        const steps = [
            {
                title: 'Basic Info'
            }
        ]


        return (
            <div>
                <Steps current={current}>
                    {steps.map((item) => (
                        <Step key={item.title} title={item.title} />
                    ))}
                </Steps>
                <Form className="col-12 row" layout='vertical'>
                    <div className="col-md-6">
                        <Form.Item label="Property Name">
                            <Input
                                type="text"
                                name="firstName"
                                value={firstName}
                                placeholder="Property Name"
                                onChange={handleChange('firstName')}
                            />
                            {firstName.touched && firstName.error && <span>{firstName.error}</span>}
                        </Form.Item>
                    </div>

                    <div className='steps-action text-center'>
                        <Button type='primary' style={{ marginRight: 8 }} onClick={this.continue}>
                            Next »
                     </Button>
                    </div>

                </Form>

            </div>
        );
    }
}

export default BasicInfo;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...