У меня есть форма, в которой я хотел бы использовать сообщение об успехе , предоставляемое библиотекой semantic-ui-реагировать.
В компоненте формы я создал следующие ключи:
class Login extends Component {
constructor(props) {
super(props)
this.state = {
isLoggedIn: false,
username: '',
password: '',
usernameError: false,
passwordError: false,
formError: false
}
.... rest of the class below
И это handleSubmit, используемый для отправки.
handleSubmit(event) {
event.preventDefault()
var { username, password} = this.state
var mailFormat = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
if (!username.match(mailFormat)) {
this.setState({ usernameError: true, formError: true })
} else {
this.setState({ usernameError: false, formError: false })
}
if (password.length <= 8) {
this.setState({ passwordError: true, formError: true })
} else {
this.setState({ passwordError: false, formError: false })
}
window.fetch(....)
}
render() {
var { username, password, usernameError, passwordError, formError, isLoggedIn } = this.state
return (
<div className='login-form'>
<Grid textAlign='center' style={{ height: '100%' }} verticalAlign='middle'>
<Grid.Column style={{ maxWidth: 450 }}>
<Header as='h2' color='teal' textAlign='center'>
{isLoggedIn ? `Register for an account` : ` Log-in to your account`}
</Header>
<Form size='large' onSubmit={this.handleSubmit} error={formError && usernameError && passwordError } success={ formError } >
{usernameError ? <Message error header='See message below' content='Email is not incorrect format'/> : null }
{passwordError ? <Message error header='See message below' content='Password should be greater than eight characters'/> : null }
{(formError === false) ? <Message success header='Your user registration was successful' content='You may now log-in with the username you have chosen'/> : null }
<Segment stacked>
<Form.Input
fluid
icon='user'
iconPosition='left'
placeholder='E-mail address'
name='username'
value={username}
onChange={this.handleChange}
error={usernameError}
/>
<Form.Input
fluid
icon='lock'
iconPosition='left'
placeholder='Password'
name='password'
value={password}
onChange={this.handleChange}
error={passwordError}
/>
<Button color='teal' fluid size='large' disabled={!this.state.username || !this.state.password}>
{isLoggedIn ? `Register` : `Log-in`}
</Button>
</Segment>
</Form>
{!isLoggedIn
? <Message>
New to us?
<a onClick={this.handleIsLoggedInClick} href='#'> Register!</a>
</Message>
: <Message>
<a onClick={this.handleIsLoggedInClick} href='#'>Back to Login</a>
</Message>
}
</Grid.Column>
</Grid>
</div>
)
}
По существу, эта строка не должна вызывать сообщение об успехе, если formError становится ложным, когда поля формы заполнены удовлетворительно?
{(formError === false) ? <Message success header='Your user registration was successful' content='You may now log-in with the username you have chosen'/> : null }