Блог

У меня есть форма, в которой я хотел бы использовать сообщение об успешном выполнении, предоставленное библиотекой semantic-ui-react.

В моем компоненте формы я создал следующие ключи:

 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 amp;amp; usernameError amp;amp; 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 } 
  

У вас есть:

 <Form size='large' onSubmit={this.handleSubmit} error={formError amp;amp; usernameError amp;amp; passwordError } success={ formError } >
  

Вместо использования formError было бы лучше использовать отдельное formSuccess поле в вашем состоянии.

Прямо сейчас в вашем коде указано показывать успех, когда есть formError , что на самом деле не имеет смысла. Вы могли бы даже иметь, например !formError .