Semantic-ui-react成功消息和条件

Question

我有一个表单，我想利用语义ui-react库提供的success message。

在我的表单组件中，我创建了以下键：

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 } 

Answer 1

你有：

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

而不是使用formError，最好在你的州使用一个单独的formSuccess字段。

现在，你的代码表示当有一个formError时显示成功，这实际上没有意义。你甚至可以有例如!formError。