我们如何在展开面板中跟踪每个表单的状态答案

【问题标题】：How can we track the state of each form in expansion panel我们如何在展开面板中跟踪每个表单的状态
【发布时间】：2019-03-23 04:11:34
【问题描述】：

我正在使用一个数组来绑定扩展面板。在 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@:%_+.~#?&//={}]*)$',
                      ]}
                      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>
          ))}

【问题讨论】：

标签： reactjs

【解决方案1】：

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

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

【讨论】：