Проверка правильности формы отображается в React после ввода правильных значений

Question

У меня есть базовая форма входа в систему, я реализовал проверку формы с использованием пользовательского интерфейса материала.

Проверка видна, даже если в текстовом поле есть значение.

код:

LoginComponent

import React from "react";
import TextField from "material-ui/TextField";
import RaisedButton from "material-ui/RaisedButton";

export class loginComponent extends React.Component {
    constructor() {
        super();
        this.state = {
            username: "",
            usernameError: "",
            password: "",
            passwordError:""
        };
    };

    onChange = e => {
        this.setState({
            [e.target.name]: e.target.value
        });
    };

    validate = () => {
        let isError = false;
        const errors = {
            usernameError: "",
            passwordError: ""
        };

        if (this.state.username.trim.length === 0) {
            isError = true;
            errors.usernameError = "Username is required";
        }

        if (this.state.password.trim.length === 0) {
            isError = true;
            errors.passwordError = "password is required";
        }

        this.setState({
            ...this.state,
            ...errors
        });

        return isError;
    }

    onSubmit = e => {
        e.preventDefault();
        const error = this.validate();
        if (!error) {
            console.log(this.state);
        }
    };

    render() {
        return (
            <div className="container">
                <div id="loginbox" style={{ marginTop: 50 }} className="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
                    <div className="panel panel-info">
                        <div className="panel-heading">
                            <div className="panel-title">Sign In</div>
                        </div>
                        <div style={{ paddingTop: 30 }} className="panel-body">
                            <form id="loginform" className="form-horizontal" role="form">
                                <div style={{ marginBottom: 25 }} className="input-group">
                                    <span className="input-group-addon"><i className="glyphicon glyphicon-user"></i></span>
                                    <TextField
                                        name="username"
                                        floatingLabelText="User name"
                                        value={this.state.username}
                                        onChange={e => this.onChange(e)}
                                        errorText={this.state.usernameError}
                                        floatingLabelFixed
                                    />
                                </div>
                                <div style={{ marginBottom: 25 }} className="input-group">
                                    <span className="input-group-addon"><i className="glyphicon glyphicon-lock"></i></span>
                                    <TextField type="password"
                                        name="password"
                                        value={this.state.password}
                                        floatingLabelText="password"
                                        onChange={e => this.onChange(e)}
                                        errorText={this.state.passwordError}
                                        floatingLabelFixed
                                    />
                                </div>
                                <div style={{ paddingTop: 10 }} className="form-group">
                                    <div className="col-sm-12 controls">
                                        <RaisedButton label="Login" onClick={e => this.onSubmit(e)} primary />
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

Это базовая проверка требуемой длины, которая все еще срабатывает даже после ввода значений в текстовое поле, может кто-нибудь подсказать, что я сделал не так.

Answer 1

думаю с твоим сравнением:

this.state.password.trim.length всегда будет return 0, так как он вычисляет длину password.trim.

Используйте this.state.password.trim().length, который обрезает значение passowrd и возвращает его длину.