反应状态管理

Question

我是新的反应，所以我的想法是，当按钮点击提交电子邮件，它检查电子邮件语法和黑名单数组，其中包含的电子邮件无法输入，如果它的假然后文字弹出(错误)，我希望警告显示后，按钮单击，但我希望警告消失，一旦输入的状态再次改变。会很感激你的帮助

export default class EmailSettings extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        email: '',
        validEmail:true,
        showMessage: false
    };
}

handleEmailChange = (e) => {
    this.setState({email: e.target.value});
};

handleSubmitEmail = (e) => {
    e.preventDefault();
    const email = this.state.email;
    if(this.validateEmail(email)) {
        this.setState({validEmail: true})
        this.setState({showMessage: false});
    }else{
        this.setState({validEmail: false })
        this.setState({showMessage: true});
    }
};


  <Input style={{marginTop: '20px', width: '360px',borderColor: !this.state.validEmail ? 'red': null}}
                           placeholder={emailPlaceHolder}
                           onChange={this.handleEmailChange}/>
                    <StyledButton type="primary" onClick={this.handleSubmitEmail}>{submit}</StyledButton>
                    <div>{this.state.showMessage ? <Error>Syntax error or email is not supported</Error> : !this.state.showMessage}</div>

现在发生的事情是消息出现，输入边框变成红色，但是在状态更改之后，红色消息或框边框没有被删除。

在这里输入图像描述

Answer 1

试试这个：

handleEmailChange = (e) => {
        this.setState({email: e.target.value,
    validEmail:true,
    showMessage:false});
    };

在输入时，只需设置非错误状态，以便在提交之后，如果出现错误并且用户再次键入错误，则重新设置错误。