当在React中使用setState设置文本时,材质ui Textfield Hinttext与文本重叠

时间:2019-03-07 13:57:17

标签: javascript reactjs material-ui

当用户单击编辑按钮时,我正在尝试使用setState自动填充文本字段。设置了文本,但默认的hintText和floatLabelText与文本重叠。当我在文本框内单击标签时,提示文本与文本重叠。我该如何解决?

这是文本字段重叠图像。

enter image description here

这是按钮

<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
/>

3 个答案:

答案 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
/>