Блог

Главная - Вопросы по программированию - Как мы можем отслеживать состояние каждой формы на панели расширения

Как мы можем отслеживать состояние каждой формы на панели расширения

#reactjs

#reactjs

Вопрос:

Я использую массив для привязки панели расширения. В разделе ExpansionPanelDetails есть 2 текстовых поля, которые являются обязательными, и кнопка сохранить. Я использую ‘react-material-ui-form-validator’ для проверки текстового поля, но мне нужно отключить кнопку, если текстовое поле пустое при загрузке страницы.

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
{state.apps.map(row => (
            <StyledValidatorForm ref={this.form} instantValidate>
              <ExpansionPanel
                key={row.id}
                expanded={expanded === row.id}
                onChange={this.handleChange(row.id)}
              >
                <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
                
                  <StyledUrlTypography>{row.name}</StyledUrlTypography>
                </ExpansionPanelSummary>
                <ExpansionPanelDetails>
                  <Typography>
                    <TextValidator
                      id="appNameField"
                      value={row.name}
                      label={<FormattedMessage {...messages.appName} />}
                      required
                      validators={['required: true']}
                      validatorListener={this.handleError}
                      errorMessages={[
                        <FormattedMessage {...messages.requiredName} />,
                      ]}
                      fullWidth
                      margin="normal"
                      onChange={evt =>
                        onAppNameFieldChange('name', row.id, evt)
                      }
                      InputLabelProps={{ shrink: true }}
                    />
                  </Typography>
                  <Typography>
                    <TextValidator
                      id="appURLField"
                      value={row.storeId}
                      label={<FormattedMessage {...messages.appStoreUrl} />}
                      required
                      validators={[
                        'required: true',
                        'matchRegexp:^(http[s]?:\/\/){1}(www\.){0,1}[-a-zA-Z0-9@:%._ ~#=]{2,256}\.[a-zA-Z]{2,256}\b([-a-zA-Z0-9@:%_ .~#?amp;//={}]*)$',
                      ]}
                      validatorListener={this.handleError}
                      errorMessages={[
                        <FormattedMessage {...messages.requiredUrl} />,
                        <FormattedMessage {...messages.invalidUrl} />,
                      ]}
                      fullWidth
                      margin="normal"
                      onChange={evt =>
                        onAppNameFieldChange('storeId', row.id, evt)
                      }
                      InputLabelProps={{ shrink: true }}
                    />
                  </Typography>
                  <Typography>
                    <TextField
                      id="appDescriptionField"
                      value={row.description}
                      label={<FormattedMessage {...messages.appDescription} />}
                      fullWidth
                      margin="normal"
                      onChange={evt =>
                        onAppNameFieldChange('description', row.id, evt)
                      }
                      InputLabelProps={{ shrink: true }}
                    />
                  </Typography>
                </ExpansionPanelDetails>
                <StyledExpansionPanelActions>
                  <Button
                    variant="contained"
                    color="primary"
                    onClick={() => {
                      updateAppDetails(row);
                      this.closePanel();
                    }}
                    disabled={!formValid}
                  >
                    <FormattedMessage {...messages.updateDetails} />
                  </Button>
                </StyledExpansionPanelActions>
              </ExpansionPanel>
            </StyledValidatorForm>
          ))}

Ответ №1:

Чтобы просто отключить кнопку сохранения, вам нужно только установить два текстовых поля на «пустоту». Что-то вроде formValid = row.name != '' amp;amp; row.storeId != '' должно сработать в этом конкретном случае.

Есть ли какое-либо другое состояние формы, которое вы хотели бы наблюдать и использовать?