当另一个输入字段设置的输入值

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。