当用户单击编辑按钮时,我正在尝试使用setState自动填充文本字段。设置了文本,但默认的hintText和floatLabelText与文本重叠。当我在文本框内单击标签时,提示文本与文本重叠。我该如何解决?
这是文本字段重叠图像。
这是按钮
<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
/>
答案 0 :(得分:5)
您可以对照该值进行检查,如果没有输入,则将''空字符串放入此答案中: 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
,只需将其删除
答案 1 :(得分:1)
我遇到了同样的问题,但是当我将功能组件更改为类组件时,它起作用了。不知道是什么原因,但是它起作用了。我仍在寻找原因,一旦找到,我将在此线程中进行更新。但是您可以尝试一下,看看是否可行。
答案 2 :(得分:0)
您需要将Textfield属性更改为
<TextField
placeholder="Enter Your Product Name"
label="Product Name"
onChange={handleChange('name')}
errorText={values.nameError}
value={values.name}
fullWidth
/>