与文本反应材质UI标签重叠 [英] React Material UI Label Overlaps with Text

问题描述

我在React应用程序中使用Material UI，并尝试实现一个实体更新页面.在这种情况下，我们需要设置实体的退出值，以允许用户更新它们.现有值已使用输入字段的defaultValue属性设置:

I'm using Material UI in a React application and trying to implement an entity update page. In this, we would need to set the exiting values of the entity to let the user update them. The existing values have been set using the defaultValue attribute of the input fields:

<div className="input-field">
   <input type="text" name="name" ref="name" defaultValue={this.state.name} />
   <label htmlFor="name" >Name</label>
</div>

使用这种方法，预期的功能可以正常工作.但是，所有文本字段的标签都与它们的值重叠.请参见下面的屏幕截图:

With this approach, the intended functionality works fine. However, the labels of all text fields overlaps with their values. Please see below screenshot:

如果我单击每个字段，标签将按预期的方式向上移动.但是，在页面加载时，标签不会向上移动.我尝试将输入字段的value属性与onChange()事件处理程序一起使用，但遇到了相同的问题.真的，感谢您对此的想法.

If I click on each field, the label moves up as expected. However, at the page load, labels do not move up. I tried using the value attribute of the input fields together with the onChange() event handler but experienced the same problem. Really, appreciate your thoughts on this.

此应用程序的完整源代码可以在这里找到: https://github.com/imesh/react-examples/tree/master/meetups/meetups-web-client

The complete source code of this application can be found here: https://github.com/imesh/react-examples/tree/master/meetups/meetups-web-client

可以在以下位置找到该特定页面: https://github.com/imesh/react-examples/blob/master/meetups/meetups-web-client/src/components/UpdateMeetup.js

This particular page can be found here: https://github.com/imesh/react-examples/blob/master/meetups/meetups-web-client/src/components/UpdateMeetup.js

Github问题: https://github.com/Dogfalo/materialize/issues/5995

Github Issue: https://github.com/Dogfalo/materialize/issues/5995

推荐答案

这是由于该值的状态不确定.

This is due to the undefined state of the value.

此变通办法对我来说是一种备用:

This workaround works for me as a fallback:

value = this.state.name ||'';

例如用于Material-UI

e.g. for Material-UI

<div className="input-field">
   <input type="text" name="name" ref="name" value={this.state.name || ''} />
   <label htmlFor="name">Name</label>
</div>

这篇关于与文本反应材质UI标签重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！