[解決済み] reactとmaterial-uiによるフォームバリデーション
2022-03-10 07:32:48
質問
現在、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;
コードに大きな変更を加えることなく、希望する機能を実現する方法はありますか?それとも、完全にリファクタリングする必要があるのでしょうか?
どのように解決するのですか?
チェックは一定時間後に行わなければならないのでしょうか?ほとんどの状況で十分な解決策は、コードを少し分割することだと思います。この場合
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);
}
関連
-
[解決済み] 名前が''の無効なフォームコントロールはフォーカスされない
-
[解決済み】event.stopPropagationとevent.preventDefaultの違いは何ですか?
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み] React JSX内のループ
-
[解決済み] Reactのこの3つの点は何をするところなのでしょうか?
-
[解決済み] React NativeとReactの違いは何ですか?
-
[解決済み] setStateを呼び出さずにReactコンポーネントを強制的に再レンダリングすることは可能ですか?
-
[解決済み] React jsのonClickはメソッドに値を渡すことができない
-
[解決済み] Reactのstateとpropsの違いとは?
-
[解決済み] HTML5 form 要素の検証を無効にする
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Wekaにおけるクロスバリデーション
-
[解決済み] JAX-WSによるサーバーサイドのスキーマ検証
-
[解決済み] reactとmaterial-uiによるフォームバリデーション
-
[解決済み] IETFが定義するメールアドレスの実際の最小の長さはどのくらいですか?
-
[解決済み] 有効なメールアドレスの最大長を教えてください。
-
[解決済み] REST APIサービスが検証に失敗した場合に返すべき適切なHTTPステータスコードは何ですか?
-
[解決済み] Angularフォームフィールドを手動で無効に設定するにはどうすればよいですか?
-
[解決済み】Hibernate Validator(JSR303)でクロスフィールド検証を行う。)
-
[解決済み】Javaのメールアドレス検証方法は何が一番良いですか?[クローズド]
-
[解決済み】入力に誤りがあった場合のHTTPステータスコードについて