reactjsでフォームを有効にする方法?

このチュートリアルでは、REACTJSでprops、state、constructor、events を使用します.
まず最初に、SIGHUPのようなコンポーネントを作成し、コンポーネントクラス(反応からインポートコンポーネント)から拡張します.

で、コンストラクタをコンポーネントに追加します.

フォームフィールドの変更をトリガーする関数ハンドルチェンジを作成します.

フォームの送信にトリガされる関数handlesubmitを作成します.

レンダリングメソッド内でエラーを作成し、フォームを作成します.

以下は完全なコードです。

import { Component } from "react";

class Signup extends Component {

    constructor(props) {
        super(props);
        this.state = {
            fullName: null,
            email: null,
            password: null,
            errors: {
                fullName: '',
                email: '',
                password: '',
            }
        };
    }


    handleChange = (event) => {

        event.preventDefault();

        const validEmailRegex =
            RegExp(/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i);

        const { name, value } = event.target;
        let errors = this.state.errors;

        switch (name) {
            case 'fullName':
                errors.fullName =
                    value.length < 5
                        ? 'Full Name must be 5 characters long!'
                        : '';
                break;
            case 'email':
                errors.email =
                    validEmailRegex.test(value)
                        ? ''
                        : 'Email is not valid!';
                break;
            case 'password':
                errors.password =
                    value.length < 8
                        ? 'Password must be 8 characters long!'
                        : '';
                break;
            default:
                break;
        }

        this.setState({ errors, [name]: value }, () => {
            console.log(errors)
        })
    }


    handleSubmit = (event) => {

        event.preventDefault();

        const validateForm = (errors) => {
            let valid = true;
            Object.values(errors).forEach(
                // if we have an error string set valid to false
                (val) => val.length > 0 && (valid = false)
            );
            return valid;
        }

        if (validateForm(this.state.errors)) {
            console.info('Valid Form')
        } else {
            console.error('Invalid Form')
        }
    }


    render() {
        console.log(this.props);
        return ( 
            <div>
                <form onSubmit={(event) => this.handleSubmit(event)}>
                    <input type="text" name="fullName" onChange={(event) => this.handleChange(event)} />
                    {errors.fullName.length > 0 &&
                        <span className='error'>{errors.fullName}</span>}

                    <input type="email" name="email" onChange={(event) => this.handleChange(event)}/>
                    {errors.email.length > 0 &&
                        <span className='error'>{errors.email}</span>}

                    <input type="password" name="password" onChange={(event) => this.handleChange(event)}/>

                    {errors.password.length > 0 &&
                        <span className='error'>{errors.password}</span>}

                    <input type="submit" name="submit" />
                </form>

            </div>

        );
    }
}

export default Signup;

してください共有購読し、あなたのためにもっと書くことを動機に肯定的なフィードバックを与える.
より多くのチュートリアルのために、visit my website .
ありがとう
ハッピーコーディング