Я создаю форму с Материал UI .Форма состоит из двух разделов.Один - это адрес доставки пользователя, а другой - адрес для выставления счетов.Во многих случаях последняя идентична первой, поэтому я предоставляю флажок для автоматического заполнения адреса для выставления счета адресом доставки.Это делается путем вызова функции, которая устанавливает значение обновляемого поля равным значению другого поля, которое сохраняется в состоянии 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>
Это состояние и функция 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];
}
}