Проверка формы React-Bootstrap - Нужна одна функция для каждого поля? - PullRequest
Новая
       6

Проверка формы React-Bootstrap - Нужна одна функция для каждого поля?

0 голосов
/ 05 января 2019

Я использую формы React-Bootstrap. У меня есть около 15 полей, которые необходимо заполнить в форме. Означает ли это, что мне нужно иметь 15 функций проверки (например, validateName, validateDate и т. Д.)?

Как это обычно достигается?

Мои данные выглядят примерно так: 

state = {
  person : {
     name: '',
     startDate: null,
     ...
     ...
     active: null
   }
 }

1 Ответ

0 голосов
/ 05 января 2019

Скажем, например, у вас есть 2 поля ввода 

     state = {
       person : {
            name: '',
            age: 0
       },
       nameError: null,
       ageError: null
    }

    handleInput = e => {
        const { person } = this.state;
        person[e.target.name] = e.target.value;
        this.setState({
            person
        });
    }

    handleSubmit = () => {
       const { person } = this.state;
       if(person.name === null){
            this.setState({
                nameError: 'Name is required',
                ageError: null
            });
       }else if(person.age === 0){
            this.setState({
                ageError: 'Age is required',
                nameError: null
            });
       }else{
           //send the values to the backend
           //also reset both nameError and ageError here
       }      
    }

    render(){
          const { person, nameError, ageError } = this.state;
          return(
              <div>
                  <input type='text' name='name' value={person.name} onChange={e => this.handleInput(e)} />
                   {nameError}
                  <input type='number' name='age' value={person.age} onChange={e => this.handleInput(e)} />
                  {ageError}
                  <button value='Submit' onClick={this.handleSubmit} />
              </div>
          );
    }

Пожалуйста, дайте мне знать, если у вас есть дополнительные вопросы. Извините, если есть опечатки, я ответил на мой мобильный

...