Материал Текстовое поле Hinttext перекрывается с текстом, когда текст установлен с помощью setState в реагировать

Question

Я пытаюсь автозаполнить текстовое поле с помощью setState, когда пользователь нажимает кнопку редактирования.Текст установлен, но hintText по умолчанию и плавающийLabelText перекрываются с текстом.Когда я щелкаю внутри текстового поля, метка идет вверх, но текст подсказки пересекается с текстом.Как я могу решить эту проблему?

это изображение перекрытия текстового поля.

это кнопка

<button type="button" className="btn btn-primary btn-sm" id="edit"
onClick={this.editProduct.bind(this, product)} value="edit">Edit</button>

когда пользователь нажимает кнопку редактирования. Функция продукта setState устанавливается следующим образом

editProduct = product => {
    this.setState({ 
        name: product.name,
        brand: product.brand,
        description: product.description, 
     });   
}

render() {
const {  name, brand, description } = this.state;
const values = { name, brand, description };

return ( 
    <div class="container">   
        <Addproduct
        handleChange={this.handleChange}
        values={values}
        />
  )
}

это текстовое поле внутри компонента Addproduct

<TextField
hintText="Enter Your Product Name"
floatingLabelText="Product Name"
onChange={handleChange('name')}
errorText={values.nameError}
defaultValue={values.name}
fullWidth
/>

Answer 1

Вам необходимо изменить атрибуты текстового поля на

<TextField
 placeholder="Enter Your Product Name"
 label="Product Name"
 onChange={handleChange('name')}
 errorText={values.nameError}
 value={values.name}
 fullWidth
/>