Проверка формы с помощью Semantic-UI-React

Question

Я использую официальные компоненты Semantic UI React для создания веб-приложения. У меня есть форма на моей странице регистрации, которая содержит поле электронной почты, поле пароля и поле подтверждения пароля.

import {Component} from 'react'; 
import {Button, Form, Message} from 'semantic-ui-react'; 
import {signUp} from '../../actions/auth'; 

class SignUp extends Component { 
    constructor(props) { 
     super(props); 
     this.handleSubmit = this.handleSubmit.bind(this); 
    } 
    handleSubmit(e, {formData}) { 
     e.preventDefault(); 

     // 
     // Potentially need to manually validate fields here? 
     // 

     // Send a POST request to the server with the formData 
     this.props.dispatch(signUp(formData)).then(({isAuthenticated}) => { 
      if (isAuthenticated) { 
       // Redirect to the home page if the user is authenticated 
       this.props.router.push('/'); 
      } 
     } 
    } 
    render() { 
     const {err} = this.props; 

     return (
      <Form onSubmit={this.handleSubmit} error={Boolean(err)}> 
       <Form.Input label="Email" name="email" type="text"/> 
       <Form.Input label="Password" name="password" type="password"/> 
       <Form.Input label="Confirm Password" name="confirmPassword" type="password"/> 

       {err && 
        <Message header="Error" content={err.message} error/> 
       } 

       <Button size="huge" type="submit" primary>Sign Up</Button> 
      </Form> 
     ); 
    } 
} 

Теперь, я привык к обычному семантическому библиотеки пользовательского интерфейса, который имеет Form Validation addon. Обычно, я бы определил правила, например, так и в отдельном файле JavaScript

$('.ui.form').form({ 
    fields: { 
     email: { 
      identifier: 'email', 
      rules: [{ 
       type: 'empty', 
       prompt: 'Please enter your email address' 
      }, { 
       type: 'regExp', 
       value: "[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?", 
       prompt: 'Please enter a valid email address' 
      }] 
     }, 
     password: { 
      identifier: 'password', 
      rules: [{ 
       type: 'empty', 
       prompt: 'Please enter your password' 
      }, { 
       type: 'minLength[8]', 
       prompt: 'Your password must be at least {ruleValue} characters' 
      }] 
     }, 
     confirmPassword: { 
      identifier: 'confirmPassword', 
      rules: [{ 
       type: 'match[password]', 
       prompt: 'The password you provided does not match' 
      }] 
     } 
    } 
}); 

Есть ли подобный метод с использованием семантического UI Реагировать компоненты для проверки формы? Я просмотрел документацию без каких-либо успехов, и, похоже, нет примеров проверки с использованием этой библиотеки Semantic UI React.

Нужно ли мне проверять каждое поле вручную в функции handleSubmit? Каков наилучший способ решить эту проблему? Спасибо за помощь!

Answer 1

Нужно ли мне проверять каждое поле вручную в функции handleSubmit ?

Печально, но это правда. SUIR doesn't have форма проверка сейчас. Тем не менее, вы можете использовать HOC для работы с формами, такими как redux-form.

Answer 2

По большей части вам необходимо проверить формы вручную. Тем не менее, RSUI включает в себя несколько инструментов, чтобы сделать вещи немного проще, в частности, ошибка prop на <Form> и <Form.Input>

Вот пример формы, которую я недавно собрал. Он может использовать немного рефакторинга, но в основном работает, привязывая каждый вход к состоянию с помощью функции onChange() и передавая обратный вызов функции отправки, которая контролирует видимость экрана загрузки и часть «Успех. Спасибо за отправку» формы.

export default class MeetingFormModal extends Component { 

    constructor(props) { 
    super(props) 

    this.state = { 
     firstName: '', 
     lastName: '', 
     email: '', 
     location: '', 
     firstNameError: false, 
     lastNameError: false, 
     emailError: false, 
     locationError: false, 
     formError: false, 
     errorMessage: 'Please complete all required fields.', 
     complete: false, 
     modalOpen: false 
    } 

    this.submitMeetingForm = this.submitMeetingForm.bind(this); 
    this.successCallback = this.successCallback.bind(this); 
    } 


    successCallback() { 
    this.setState({ 
     complete: true 
    }) 
    setTimeout(() => {this.setState({modalOpen: false})}, 5000); 
    this.props.hideLoading(); 
    } 

    handleClose =() => this.setState({ modalOpen: false }) 
    handleOpen =() => this.setState({ modalOpen: true }) 

    submitMeetingForm() { 

    let error = false; 

    if (this.state.studentFirstName === '') { 
     this.setState({firstNameError: true}) 
     error = true 
    } else { 
     this.setState({firstNameError: false}) 
     error = false 
    } 
    if (this.state.studentLastName === '') { 
     this.setState({lastNameError: true}) 
     error = true 
    } else { 
     this.setState({lastNameError: false}) 
     error = false 
    } 
    if (this.state.email === '') { 
     this.setState({emailError: true}) 
     error = true 
    } else { 
     this.setState({emailError: false}) 
     error = false 
    } 
    if (this.state.location === '') { 
     this.setState({locationError: true}) 
     error = true 
    } else { 
     this.setState({locationError: false}) 
     error = false 
    } 

    if (error) { 
     this.setState({formError: true}) 
     return 
    } else { 
     this.setState({formError: false}) 
    } 


    let meeting = { 
     first_name: this.state.firstName, 
     last_name: this.state.lastName, 
     email: this.state.email, 
     location: this.state.location, 

    this.props.createMeeting(meeting, this.successCallback) 
    this.props.showLoading(); 
    } 

    capitalize(string) { 
    return string.charAt(0).toUpperCase() + string.slice(1); 
    } 

    render() { 
    return(
     <Modal 
     trigger={<Button onClick={this.handleOpen} basic color='blue'>Schedule Now</Button>} 
     open={this.state.modalOpen} 
     onClose={this.handleClose} 
     closeIcon={true} 
     > 
     <Modal.Header>Schedule Your Interview</Modal.Header> 
     <Modal.Content> 
      {!this.state.complete ? 
      <Modal.Description> 
      <Form error={this.state.formError}> 
       <Form.Group widths='equal'> 
       <Form.Field> 
        <Form.Input required={true} onChange={(e) => this.setState({firstName: e.target.value})} label='First Name' placeholder="First Name..." error={this.state.firstNameError}/> 
       </Form.Field> 
       <Form.Field> 
        <Form.Input required={true} onChange={(e) => this.setState({lastName: e.target.value})} label='Last Name' placeholder="Last Name..." error={this.state.lastNameError}/> 
       </Form.Field> 
       </Form.Group> 
       <Form.Field > 
       <Form.Input required={true} onChange={(e) => this.setState({email: e.target.value})} label='Email' placeholder="Email..." error={this.state.emailError}/> 
       </Form.Field> 
       <Form.Field> 
       <Form.Input required={true} onChange={(e) => this.setState({location: e.target.value})} label='Location' placeholder='City, State/Province, Country...' error={this.state.locationError}/> 
       </Form.Field> 
      </Form> 
      </Modal.Description> 
      : 
      <div className='modal-complete'> 
       <Image src='/images/check.png' /> 
       <p>Thanks for scheduling a meeting, {this.capitalize(this.state.name)}. We've received your information and we'll be in touch shortly.</p> 
      </div> 
      } 
     </Modal.Content> 
     {!this.state.complete ? 
     <Modal.Actions> 
      <Button color='red' onClick={this.handleClose}>Close</Button> 
      <Button positive icon='checkmark' labelPosition='right' content="Submit" onClick={this.submitMeetingForm} /> 
     </Modal.Actions> 
     : null } 
     </Modal> 
    ) 
    } 
} 

Надеюсь, что это поможет!