Question

我正在使用React-Bootstrap表单。我大约有15个字段需要填写表格。这是否意味着我需要具有15个验证功能（例如validateName，validateDate等）？

通常如何处理？

我的数据看起来像这样：

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

Answer 1

例如，您有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>
          );
    }

如果您还有其他疑问，请告诉我。抱歉，我的手机上有错字

React-Bootstrap表单验证-每个字段需要一个功能吗？

1 个答案: