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});
    };

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

反应-状态管理

1 个答案: