React - 状态管理答案

【问题标题】：React - state managementReact - 状态管理
【发布时间】：2020-07-13 18:20:33
【问题描述】：

我是 React 的新手，所以我的想法是，当单击按钮提交电子邮件时，它会检查电子邮件语法和包含无法输入的电子邮件的黑名单数组，如果它为 false，则 Text 会弹出（错误），我希望在单击按钮后显示警告，但是我希望在输入状态再次更改后警告消失。希望能得到一些帮助

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>

现在发生的事情是消息出现并且输入边框变为红色但在状态更改后红色消息或框边框没有消失

enter image description here

【问题讨论】：

标签： reactjs react-state

【解决方案1】：

试试这个：

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

在输入时，只需设置非错误状态，这样提交后如果有错误，用户再次输入，错误就会被重置。

【讨论】：