Javascript 获得；对象可能是'；空'；。TS2531“；关于表单输入字段

我正在尝试构建一个简单的表单来捕获在Firebase上注册的新用户的电子邮件和密码，我正在使用React with Typescript，我在代码的以下部分遇到了错误“Object可能为'null'。TS2531”：

 <form onSubmit={(event) => { this.handleSignUp({event, email: this._email.current.value, password: this._password.current.value})}}>

---

我真的不确定我需要什么代码才能不抛出这个错误，任何建议都是特别的。

就像它说的那样。默认情况下，引用为空，不能保证在您访问它们时（

current

）会被分配（就代码所知）

您有两种选择：

• 在访问

  this.\u email.current

  和

  this.\u password.current

  之前添加一个真实的检查

• 使用非空断言，因为您知道它是一个安全的操作：

  this.\u email.current！。值

---

请原谅我的无知，但这些东西到底是什么样子的？我对truthy操作符的最佳猜测是添加修改代码，如下``{this.handleSignUp（{event，email:（）=>{if（this._email.current.value）{return this._email.current.value}，password:（）=>{if（this._password.current.value）{return this._password.current.value}}}>“我想我是想展示一个编码的例子来说明它是什么样子的，不是因为我不想做这项工作，而是我真的不知道真实性检查或非空断言是什么样子。不过我现在正在用谷歌搜索它们。

interface IHandleSubmitNewUserFunc {
    event: any,
    email: any,
    password: any
}

class NewUserSignup extends React.Component {
     constructor(props: any) {
         super(props);
         this.handleSignUp = this.handleSignUp.bind(this);
     }

    handleSignUp(input: IHandleSubmitNewUserFunc) {
        input.event.preventDefault();
        const { email, password } = input;
        if (email.length < 4 && email != null) {
            alert('Please enter an email address.');
            return;
        }
        if (password.length < 4 && password != null) {
            alert('Please enter a password.');
            return;
        }
        firebase.auth().createUserWithEmailAndPassword(email, password).catch(function (error) {
            var errorCode = error.code;
            var errorMessage = error.message;
            if (errorCode == 'auth/weak-password') {
                alert('The password is too weak.');
            } else {
                alert(errorMessage);
            }
            console.log(error);
        });
    }

    private _email = React.createRef<HTMLInputElement>();
    private _password = React.createRef<HTMLInputElement>();

    render() {
        return <div>
            <div className="signup-modal-container">
                <div className="identity-panel">
                    <img src={logo}></img>
                    <form onSubmit={(event) => { this.handleSignUp({event, email: this._email.current.value, password: this._password.current.value})}}>
                        <div className="form-flex-container">
                            <div className="signup-item">
                                <h2>
                                    Sign Up
                                </h2>
                                <label htmlFor="email" id="email">
                                    Email:
                                </label>
                            </div>
                            <div className="signup-item">
                                <div className="input-container">
                                    <input type="text" name="email" id="email" ref={this._email}/>
                                </div>
                            </div>
                            <div className="signup-item">
                                <label htmlFor="password">
                                    Password:
                                </label>
                            </div>
                            <div className="signup-item">
                                <div className="input-container">
                                    <input type="password" name="password" id="password" ref={this._password}/>
                                </div>
                            </div>
                            <div className="signup-item">
                                <button type="submit">
                                    Sign Up
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <p>
            NewUserSignup is showing
            </p>

        </div>
    }
}
export default NewUserSignup;

const eCurrent = this._email.current;
const pCurrent = this._password.current;
if (!eCurrent || !pCurrent) {
  // This will probably never happen, to respond to events these will be hooked up.
  return;
}

// Assert that current won't be null.
const emailValue = this._email.current!.value;
const passwordValue = this._password.current!.value;