如何在展开面板中跟踪每个窗体的状态

Question

我正在使用一个数组来绑定扩展面板。在ExpansionPanelDetails部分有两个文本框，它们是必选和保存按钮。我正在使用'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@:%_+.~#?&//={}]*)$',
                      ]}
                      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>
          ))}

​

Answer 1

要简单地禁用保存按钮，您只需选中"emptiness“上的两个文本框。在这种特定的情况下，像formValid = row.name != '' && row.storeId != ''这样的东西应该可以工作。

您还想观察和使用表单的其他状态吗？