reactjs - 当输入值由另一个输入字段设置时，Material-UI InputLabel 覆盖文本

Question

我正在创建一个表单 Material UI .该表格有两个部分。一个是用户的送货地址，另一个是账单地址。在许多情况下，后者与前者相同，因此我提供了一个复选框来自动填写帐单地址和送货地址。它通过调用一个函数来实现，该函数将待更新字段的值设置为等于另一个字段的值，该值保存在 React 状态中。

MUI Input组件自己处理字段。 InputLabel组件也用于标记它们。通常，当在字段中输入值时，InputLabel文本在字段上方移动，如下所示:



但是，当检查复选框并通过在送货地址字段中键入帐单地址字段中的值填充值时，标签将无法关闭:



我一直无法解决这个问题，Stack Overflow 上的类似问题似乎也没有解决我的问题。我该如何解决？

编辑:

这是屏幕截图中的代码:

<Grid container spacing={40} className={classes.formContainer}>
  <Grid item xs>
  </Grid>
  <Grid item xs>
    <FormControlLabel
      control={
        <Checkbox
          checked={this.state.sameAddressScreen2}
          onChange={this.handleSameAddressScreen2}
          value="sameAddressScreen2"
        />
      }
      label="Same as Location Address"
    />
  </Grid>
</Grid>
<Grid container spacing={40} className={classes.formContainer}>
  <Grid item xs={6}>
    <FormControl margin="normal" required fullWidth>
      <InputLabel htmlFor="locationStreetAddress1">Street Address 1</InputLabel>
      <Input id="locationStreetAddress1" name="locationStreetAddress1" autoFocus value={this.state.locationStreetAddress1} onChange={this.handleChange} />
    </FormControl>
  </Grid>
  <Grid item xs={6}>
    <FormControl margin="normal" required fullWidth>
      <InputLabel htmlFor="mailingStreetAddress1">Street Address 1</InputLabel>
      <Input id="mailingStreetAddress1" name="mailingStreetAddress1" autoFocus value={sameValue('mailingStreetAddress1')} onChange={this.handleChange} />
    </FormControl>
  </Grid>
</Grid>

这是国家和 sameValue代码调用的函数:

state = {
  locationStreetAddress1: '',
  mailingStreetAddress1: '',
  sameAddressScreen2: false,
};

sameValue = (field) => {
  if (this.state.sameAddressScreen2 === true) {
    let stateKey = 'location'.concat(field.slice(7));
    return this.state[stateKey];
  } else {
    return this.state[field];
  }
}

Answer 1

InputLabel 组件有一个名为“shrink”的属性 - 当 Input 组件有一个值时，将它设置为 true，您将获得所需的行为。