[英]Material ui Textfield Hinttext overlap with with text when text is set with setState in react
I am trying to autofill textfield using setState when user click on edit button.当用户单击编辑按钮时,我试图使用 setState 自动填充文本字段。 Text is set but default hintText and floatingLabelText overlap with text.文本已设置,但默认提示文本和浮动标签文本与文本重叠。 When i click inside textfield lable go up but hintText overlap with text.当我在文本字段标签内点击时,提示文本与文本重叠。 How can i solve this?我该如何解决这个问题?
this is textfield overlap image.这是文本字段重叠图像。
this is button这是按钮
<button type="button" className="btn btn-primary btn-sm" id="edit"
onClick={this.editProduct.bind(this, product)} value="edit">Edit</button>
when user click on edit button editProduct function setState is set like this当用户单击编辑按钮时,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}
/>
)
}
this is textfield inside Addproduct component这是 Addproduct 组件中的文本字段
<TextField
hintText="Enter Your Product Name"
floatingLabelText="Product Name"
onChange={handleChange('name')}
errorText={values.nameError}
defaultValue={values.name}
fullWidth
/>
You can check against the value and put '' empty string if no input there like this answer: React Material UI Label Overlaps with Text如果没有输入,您可以检查该值并放置 '' 空字符串,就像这个答案: 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
/>
If you don't need defaultValue
just remove it如果您不需要defaultValue
只需将其删除
I faced the same issue, but when I changed my functional component to class component it worked.我遇到了同样的问题,但是当我将功能组件更改为类组件时,它起作用了。 Not sure what was the reason but it worked.不知道是什么原因,但它起作用了。 I'm still looking for the reason, I'll update in this thread once I find.我仍在寻找原因,一旦找到,我会在此线程中更新。 But you can give it a try and check if that works.但是你可以试一试,看看它是否有效。
You need to change the Textfield attributes to您需要将 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.