反应 - 状态管理

Question

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

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

Answer 1

试试这个：

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

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

反应 - 状态管理

React - state management

reactjs

react-state