材料ui Textfield Hinttext与文本在使用setState in react设置时重叠

Question

我试图在用户单击编辑按钮时使用setState自动填充文本字段。设置了文本，但默认的hintText和floatingLabelText与文本重叠。当我在文本区域内点击标签时，但是hintText与文本重叠。我怎么解决这个问题？

这是文本域重叠图像。

这是按钮

<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

您需要将Textfield属性更改为

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