javascript - 当在 react 中使用 setState 设置文本时，Material ui Textfield Hinttext 与文本重叠

Question

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

这是文本框重叠图像。

这是按钮

<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就把它去掉