web-dev-qa-db-ja.com

reactおよびmaterial-uiによるフォーム検証

現在、material-uiコンポーネントを使用して構築されたフォームに検証を追加しようとしています。私はそれを動作させていますが、問題は、現在の方法では、入力のすべての状態変化（つまり、入力されたすべての文字）で検証機能が現在呼び出されていることです。ただし、入力が停止した後にのみ検証を実行する必要があります。

私の現在のコードを考える：

class Form extends React.Component {

    state = {open: false, email: '', password: '', email_error_text: null, password_error_text: null, disabled: true};

    handleTouchTap() {
        this.setState({
            open: true,
        });
    }

    isDisabled() {
        let emailIsValid = false;
        let passwordIsValid = false;

        if (this.state.email === "") {
            this.setState({
                email_error_text: null
            });
        } else {
            if (validateEmail(this.state.email)) {
                emailIsValid = true
                this.setState({
                    email_error_text: null
                });
            } else {
                this.setState({
                    email_error_text: "Sorry, this is not a valid email"
                });
            }
        }

        if (this.state.password === "" || !this.state.password) {
            this.setState({
                password_error_text: null
            });
        } else {
            if (this.state.password.length >= 6) {
                passwordIsValid = true;
                this.setState({
                    password_error_text: null
                });
            } else {
                this.setState({
                    password_error_text: "Your password must be at least 6 characters"
                });
            }
        }

        if (emailIsValid && passwordIsValid) {
            this.setState({
                disabled: false
            });
        }
    }

    changeValue(e, type) {
        const value = e.target.value;
        const nextState = {};
        nextState[type] = value;
        this.setState(nextState, () => {
            this.isDisabled()
        });
    }

    login() {
        createUser(this.state.email, this.state.password);
        this.setState({
            open: false
        });
    }

    render() {

        let {open, email, password, email_error_text, password_error_text, disabled} = this.state;

        const standardActions = (
            <FlatButton
                containerElement={<Link to="/portal" />}
                disabled={this.state.disabled}
                label="Submit"
                onClick={this.login.bind(this)} 
            />
        );

        return (
            <div style={styles.container}>
                <Dialog
                    open={this.state.open}
                    title="Enter Your Details to Login"
                    actions={standardActions}
                >
                    <span className="hint--right hint--bounce" data-hint="Enter in your email address">
                        <TextField
                            hintText="Email"
                            floatingLabelText="Email"
                            type="email"
                            errorText={this.state.email_error_text}
                            onChange={e => this.changeValue(e, 'email')} 
                        />
                    </span>
                    <br />
                    <span className="hint--right hint--bounce" data-hint="Enter your password">
                        <TextField
                            hintText="Password"
                            floatingLabelText="Password"
                            type="password"
                            errorText={this.state.password_error_text}
                            onChange={e => this.changeValue(e, 'password')} 
                        />
                    </span>
                </Dialog>
                <h1>VPT</h1>
                <h2>Project DALI</h2>
                <RaisedButton
                    label="Login"
                    primary={true}
                    onTouchTap={this.handleTouchTap.bind(this)} 
                />
            </div>
        );
    }
}

export default Form;

コードに大きな変更を加えることなく、目的の機能を実現できる方法はありますか、それとも完全にリファクタリングする必要がありますか？

どんな助けも大歓迎です

御時間ありがとうございます

validationeventsreactjsmaterial-ui
13
BeeNag

一定の遅延後にチェックを行う必要がありますか？ほとんどの状況で十分だと思う解決策は、コードを少し分割することです。 isDisabled()でchangedValue()関数をトリガーしないでください。代わりにonBlurイベントで実行してください。

これを試して：

<TextField
  hintText="Password"
  floatingLabelText="Password"
  type="password"
  errorText={this.state.password_error_text}
  onChange={e => this.changeValue(e, 'password')}
  onBlur={this.isDisabled} 
/>

そして、あなたの機能は次のようになります：

changeValue(e, type) {
    const value = e.target.value;
    const nextState = {};
    nextState[type] = value;
    this.setState(nextState);
}
9
Chris

これは library で作成したもので、フィールドの検証に関連するすべてを処理し、material-uiコンポーネントもサポートしています...

フィールドを検証するには、フィールドコンポーネントをラップするだけで完了です。手動で状態を管理するための多くの労力を節約できます。

<Validation group="myGroup1"
    validators={[
            {
             validator: (val) => !validator.isEmpty(val),
             errorMessage: "Cannot be left empty"
            }, ...
        }]}>
            <TextField value={this.state.value}
                       className={styles.inputStyles}
                       style={{width: "100%"}}
                       onChange={
                        (evt)=>{
                          console.log("you have typed: ", evt.target.value);
                        }


     }/>
3
VISHAL DAGA

最も簡単なのは、form.reportValidity()を呼び出すことです。 formは、event.currentTarget.formを呼び出すことで取得できます。

2
Loke

現在のMaterial-UIバージョンはerrorText propを使用しませんが、エラーを表示し、Material-UIのTextFieldに検証を適用するために使用できる方法がまだあります。

error（Boolean）プロパティを使用して、エラーがあるかどうかを示します。さらにエラーテキストを表示するには、Material-UIのTextFieldのhelperTextプロパティを使用し、表示するエラーテキストを指定します。

次のようにします：

<TextField
  value={this.state.text}
  onChange={event => this.setState({ text: event.target.value })}
  error={text === ""}
  helperText={text === "" ? 'Empty!' : ' '}
/>
1
whiteknight

フォームの検証用に npm package を公開しました。作業例は、私の githubプロファイル にあります。

1
Hayk Aghabekyan

Onblurテキストフィールドイベントを使用できます。入力がフォーカスを失ったときにトリガーされます。

0
Yurii Kramarenko