[英]Material ui Textfield Hinttext overlap with with text when text is set with setState in react
当用户单击编辑按钮时,我试图使用 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
/>
如果没有输入,您可以检查该值并放置 '' 空字符串,就像这个答案: 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
只需将其删除
我遇到了同样的问题,但是当我将功能组件更改为类组件时,它起作用了。 不知道是什么原因,但它起作用了。 我仍在寻找原因,一旦找到,我会在此线程中更新。 但是你可以试一试,看看它是否有效。
您需要将 Textfield 属性更改为
<TextField
placeholder="Enter Your Product Name"
label="Product Name"
onChange={handleChange('name')}
errorText={values.nameError}
value={values.name}
fullWidth
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.