当在反应中使用 setState 设置文本时，Material ui Textfield Hinttext 与文本重叠

Question

当用户单击编辑按钮时，我试图使用 setState 自动填充文本字段。文本已设置，但默认提示文本和浮动标签文本与文本重叠。当我在文本字段标签内点击时，提示文本与文本重叠。我该如何解决这个问题？

这是文本字段重叠图像。

这是按钮

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

当用户单击编辑按钮时，editProduct 函数 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

如果没有输入，您可以检查该值并放置 '' 空字符串，就像这个答案： React Material UI Label Overlaps with Text

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

如果你不需要defaultValue就删除它