Проверить поле, если утверждение верно - PullRequest
0 голосов
/ 10 января 2019

Я работаю над добавлением проверки некоторых полей только в том случае, если в приложение загружен файл, я реализовал пользовательскую проверку, но на входе есть только сообщение об ошибке, но я не могу добавить входную проверку, которая выглядит как дизайн муравья обеспечивает.

В своей пользовательской проверке я реализовал только сообщение об ошибке.

это форма, которую нужно проверить, если вмененный файл:

                                       <StyledSelectInput
                                           showSearch
                                           placeholder="Select a builder"
                                           optionFilterProp="children"
                                           onChange={this.setSelectValue('builder')}
                                           filterOption={this.selectFilterOptions}
                                       >
                                           {builderOptions}
                                       </StyledSelectInput>
                                       {this.state.missingBuilder && <ValidationMessage>Please input a builder!</ValidationMessage>}

                                   </Col>
                               </Row>

                               <Row>
                                   <Col>
                                       <StyledSelectInput
                                           showSearch
                                           placeholder="Select a community"
                                           optionFilterProp="children"
                                           onChange={this.setSelectValue('community')}
                                           filterOption={this.selectFilterOptions}
                                       >
                                           {communityOptions}
                                       </StyledSelectInput>
                                       {this.state.missingCommunity && <ValidationMessage>Please input a community!</ValidationMessage>}
                                   </Col>
                               </Row>
                               <Dragger multiple={false}
                                        accept=".csv"
                                        onChange={this.handleUploadChange}
                                        customRequest={this.processCSV}
                                        onRemove={this.removeFile}
                                        fileList={this.state.fileList}
                               >
                                   <p className="ant-upload-drag-icon">
                                       <Icon type="upload" />
                                   </p>
                                   <p className="ant-upload-text">Click to upload or drag a .csv file to this area to upload </p>
                               </Dragger>

And these are the functions for the custom validation:

       handleSubmit = (e) => {
           e.preventDefault();
           if (this.state.csvUploaded) {
               const {builder, community} = this.state;
               const nextState = {};
               if (!builder) nextState.missingBuilder = true;
               if (!community) nextState.missingCommunity = true;

               if (isEmpty(nextState)) {
                   let homesPayload = this.state.homesPayload;
                   homesPayload = homesPayload.map((home) => {
                       home.builderId = builder;
                       home.communityId = community;
                       return home;
                   });
                   return this.store({homes: homesPayload});
               }
               return this.setState(nextState);
           }
           this.props.form.validateFields((err, values) => {
               const payload = {
                   home: values
               };
               if (!err) {
                   this.setState({loading: true});
                   this.store(payload)
               }
           });
       };

       setSelectValue = (type) => {
           return (value) => {
               const nextState = { [type]: value };
               if (type === 'builder')
                   nextState.missingBuilder = false;
               if (type === 'community')
                   nextState.missingCommunity = false;
               this.setState(nextState)
           }
       };

я ожидаю, что проверка будет выглядеть как проверка проекта муравья

...