Reactjs 当输入值由另一个输入字段设置时，材质UI InputLabel覆盖文本

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

MUI

Input

组件自己处理字段。

InputLabel

组件也用于标记它们。通常，当在字段中输入值时，

InputLabel

文本在字段上方移动，如下所示：

但是，如果选中该复选框，并通过在“发货地址”字段中键入来在“账单地址”字段中填充该值，则标签无法显示：

我一直无法解决这个问题，而且似乎没有类似的堆栈溢出问题可以解决我的问题。我该如何解决这个问题

编辑：

以下是屏幕截图中的代码：

<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>

---

InputLabel组件有一个名为“收缩”的属性-当输入组件具有值时，将此设置为true，您将获得所需的行为。

请共享一个或类似的复制问题的代码，并将该代码包含在问题文本中。我已将相关代码添加到原始问题中。InputLabel组件具有名为“收缩”的属性-当输入组件有值时，将此设置为true，您将获得所需的行为。这一切对我来说都很好，无需在此明确管理

shrink

：状态管理方法不会对材质UI产生任何影响。看看你是否可以修改我的沙盒，使之更接近你正在做的事情，看看你是否可以重现这个问题。您是否正在使用最新版本的Material UI（3.9.2）？这是真的，但是

FormControl

组件应该自动管理

InputLabel

收缩

属性。这样做了！我必须编写一个函数，在任何给定时间手动确定三个输入的状态，以便更新传递到

shrink

属性的状态，但它会导致所需的行为。奇怪的是

FormControl

把球扔到了这里。同意。maerial ui中是否记录了错误？这真臭！官方链接

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];
  }
}