Ich versuche derzeit, eine Validierung zu einem Formular hinzuzufügen, das aus Komponenten von Material-Ui besteht. Ich habe es funktioniert, aber das Problem ist, dass die Validierungsfunktion so, wie ich sie gerade mache, derzeit bei jeder Zustandsänderung in der Eingabe (d. H. Jedem eingegebenen Buchstaben) aufgerufen wird. Ich möchte jedoch, dass meine Bestätigung erst erfolgt, wenn die Eingabe beendet ist.
Angesichts meines aktuellen Codes:
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;
Gibt es eine Möglichkeit, die gewünschte Funktionalität zu erreichen, ohne den Code wesentlich zu ändern, oder muss der Code komplett überarbeitet werden?
Jede Hilfe wäre sehr dankbar
Vielen Dank für Ihre Zeit
Muss die Prüfung nach einer gewissen Verzögerung erfolgen? Eine Lösung, die meiner Meinung nach in den meisten Situationen ausreichen würde, wäre, Ihren Code etwas aufzuteilen. Lösen Sie Ihre isDisabled()
-Funktion nicht in changedValue()
aus. Lassen Sie es stattdessen für das Ereignis onBlur
ausführen.
Versuche dies:
<TextField
hintText="Password"
floatingLabelText="Password"
type="password"
errorText={this.state.password_error_text}
onChange={e => this.changeValue(e, 'password')}
onBlur={this.isDisabled}
/>
und dann wird deine Funktion:
changeValue(e, type) {
const value = e.target.value;
const nextState = {};
nextState[type] = value;
this.setState(nextState);
}
Diese Bibliothek die ich erstellt hatte, kümmert sich um alles, was mit der Validierung von Feldern zusammenhängt, und es unterstützt auch Material-UI-Komponenten ...
Um Ihre Felder zu überprüfen, müssen Sie nur Ihre Feldkomponente einpacken und sind damit fertig ... Sie sparen viel Aufwand bei der manuellen Verwaltung des Zustands.
<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);
}
}/>
Am einfachsten ist es, form.reportValidity()
aufzurufen. form
kann durch Aufruf von event.currentTarget.form
erhalten werden.
In der aktuellen Material-UI-Version wird die Requisite errorText
nicht verwendet. Es gibt jedoch eine Möglichkeit, Fehler anzuzeigen und die Validierung auf das TextField in Material-UI anzuwenden.
Wir verwenden die Eigenschaft error
(Boolean), um anzugeben, ob ein Fehler vorliegt oder nicht. Um den Fehlertext anzuzeigen, geben Sie im Material-UI die Eigenschaft helperText
des TextField ein und geben Sie den anzuzeigenden Fehlertext an.
Mach es wie:
<TextField
value={this.state.text}
onChange={event => this.setState({ text: event.target.value })}
error={text === ""}
helperText={text === "" ? 'Empty!' : ' '}
/>
Ich habe soeben das npm-Paket zur Validierung von Formularen veröffentlicht. Arbeitsbeispiel finden Sie in meinem github-Profil
Sie können das Textfeldereignis auf Unschärfe anwenden. Wird ausgelöst, wenn die Eingabe den Fokus verliert.