为什么在用户输入文本之前我需要的输入被突出显示？

Question

我正在构建一个包含登录/注册表单的 React 组件。显示哪个表单由用户通过单击相关选项卡来确定，这会更新状态中的reg 和log 的值。但是，我的问题是，如果用户在任一表单的前两个输入中输入文本，如果他们切换到另一个表单，则该表单的前两个输入将突出显示为红色，即使用户没有输入任何内容这些输入。我截取了一些截图来说明我的意思：

有人能解释为什么会这样吗？这只是一个小问题，但我想至少了解它发生的原因:)

这是组件的render()方法内的表单：

<aside className="logReg">
    <ul className="tabGroup">
        <li className={`tab${this.state.reg ? " active" : ""}`} onClick={this.handleClick}>Register</li>
        <li className={`tab${this.state.log ? " active" : ""}`} onClick={this.handleClick}>Login</li>
    </ul>
    {this.state.reg ?
        <form className="form" id="register" />
            <label className="label">Full Name</label>
            <input className="input" type="text" onChange={ this.handleRegName } value={ this.state.register.name } required/>

            <label className="label">Email</label>
            <input className="input" type="email" onChange={ this.handleRegEmail } value={ this.state.register.email } required/>

            <label className="label">Password</label>
            <input className="input" type="password" onChange={ this.handleRegPass } value={ this.state.register.pass } required/>

            <label className="label">Password Confirmation</label>
            <input className="input" type="password" onChange={ this.handleRegConf } value={ this.state.register.conf } required/>

            <button className="formButton" type="submit">Register</button>
        </form>
    :
        <form className="form" id="login" >
            <label className="label">Email</label>
            <input className="input" type="email" onChange={ this.handleLogEmail } value={ this.state.login.email } required/>

            <label className="label">Password</label>
            <input className="input" type="password" onChange={ this.handleLogPass } value={ this.state.login.pass } required/>

            <button className="formButton" type="submit">Login</button>
        </form>
    }
</aside>

这是我的状态结构：

        this.state = {
            reg: true,
            register: {
                name: "",
                email: "",
                pass: "",
                conf: ""
            },
            log: false,
            login: {
                email: "",
                pass: ""
            }
        }

这是我的一些方法（所有handleRegEmail/handleLogName 等都遵循与下面handleRegName(e) 相同的结构）：

    handleClick(){
        let currentReg = this.state.reg;
        let currentLog = this.state.log;
        this.setState({
            reg: !currentReg,
            log: !currentLog
        })
    }

    handleRegName(e){
        let registerCopy = JSON.parse(JSON.stringify(this.state.register));
        registerCopy.name = e.currentTarget.value;
        this.setState({ 
            register: registerCopy
        });
    }

Answer 1

检查您在哪里实现用于验证表单的逻辑，问题的原因可能就在那里。

也尝试将name 属性添加到您的输入元素并使用它进行验证？

也许您使用type['...'] 进行验证？

希望这些帮助