Javascript 反应材质UI标签与文本重叠

我正在React应用程序中使用MaterialUI，并尝试实现实体更新页面。在这种情况下，我们需要设置实体的现有值，以允许用户更新它们。已使用输入字段的defaultValue属性设置了现有值：

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

名称

使用这种方法，预期的功能运行良好。但是，所有文本字段的标签与其值重叠。请参见下面的屏幕截图：

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

此应用程序的完整源代码可在此处找到：

此特定页面可在此处找到：

---

Github问题：

这是由于值的未定义状态造成的

此解决方案对我来说是一种后备方案：

value=this.state.name | |“”

e、 g.对于材料用户界面

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


名称
我可以说任何适合我的话。试试这个

这适用于基于功能的组件

 const Example = () =>{
   const [name, setName] = useState("");
    const editName = (name) =>{
    setName(name);
  }

        return(
          <TextField
            required
            variant="outlined"
            margin="normal"
            fullWidth
            value={name}
            onChange={e => setName(e.target.value)}
            label="Enter Name"
          />
      )
  }

const示例=（）=>{
const[name，setName]=useState（“”）；
const editName=（name）=>{
集合名（名称）；
}
返回(
setName（e.target.value）}
label=“输入名称”
/>
)
}
我通过使用一个条件解决了这个问题，如果它不是null和&undefined则将值赋值为“”。这里使用Formik

<TextField
                    type="text"
                    label="Ending Month"
                    variant="outlined"
                    fullWidth
                    size="small"
                    name="endingMonth"
                    value={
                      values.endingMonth === null ||
                      values.endingMonth === undefined
                        ? ""
                        : values.endingMonth
                    }
                    helperText={touched.endingMonth && errors.endingMonth}
                    error={Boolean(touched.endingMonth && errors.endingMonth)}
                  />

我也有同样的问题；然而，这是不一致的-这意味着有时我的标签显示正确，有时重叠

我尝试了以下方法，效果很好。
基本上，表单首先呈现为空，没有数据；然后useEffect获取数据并填充数据。
我设置了一个isLoading状态变量——在API获取数据后，该变量最初设置为true，然后设置为false

仅在isLoading为false后显示所有数据-这很好

代码片段

export default function UserProfile(props) {
const classes = useStyles();
const [user, setUser] = React.useState({});
const [isLoading, setIsLoading] = React.useState(true);

const getUser = async () => {
    const requestOptions = {
        method: 'GET',
        cache: 'no-cache',
        headers: { 
            'Content-Type': 'application/json',
        },
        redirect: 'follow',
        referrerPolicy: 'no-referrer',            
    };

    const response = await axios.request(
        "/api/userprofile",
        requestOptions
    );

    const responseData = await response.data;
    
    setUser( responseData.userProfile );
    setIsLoading(false);
}

React.useEffect(() =>{
    getUser();
    console.log(user);
})

return(
    <div style={{padding:"10px"}}>
        <Grid container className={classes.card}>
            <Container component="main" maxWidth="xs">
            <>{ isLoading ? <div> </div> : 
            <div className={classes.paper}>
                <Typography variant="h6">User Profile</Typography>
                <TextField
                    key="Name"
                    variant="outlined"
                    margin="normal"
                    fullWidth
                    id="Name"
                    label="Name"
                    value={user.name}
                    InputProps={{
                        readOnly: true,
                    }}
                />
                <TextField
                    variant="outlined"
                    margin="normal"
                    fullWidth
                    id="email"
                    label="Email Address"
                    value={user.email}
                    InputProps={{
                        readOnly: true,
                    }}
                />
                <TextField
                    variant="outlined"
                    margin="normal"
                    fullWidth
                    id="phone"
                    label="Phone"
                    value={user.phone_number}
                    InputProps={{
                        readOnly: true,
                    }}
                />
            </div>
            }</>
            </Container>
        </Grid>
    </div>
);

导出默认函数UserProfile（props）{
const classes=useStyles（）；
const[user，setUser]=React.useState（{}）；
const[isLoading，setIsLoading]=React.useState（true）；
const getUser=async（）=>{
常量请求选项={
方法：“GET”，
缓存：“无缓存”，
标题：{
“内容类型”：“应用程序/json”，
},
重定向：“跟随”，
推荐人政策：“无推荐人”，
};
const response=等待axios.request(
“/api/userprofile”，
请求选项
);
const responseData=等待响应.data；
setUser（responseData.userProfile）；
设置加载（假）；
}
React.useffect（（）=>{
getUser（）；
console.log（用户）；
})
返回(
{正在加载？：
用户配置文件
}
);

}有一个属性
收缩
。您可以在文本字段中使用，如下所示：

<TextField
  // ... rest
  InputLabelProps={{ shrink: true }}  
/>


如下所示：

<InputLabel shrink={true}>Select A Role</InputLabel>

选择一个角色

InputLabelProps
在react中给出了功能组件错误。
您能确认在这个沙箱中看到相同的故障吗？感谢Evgeny的快速响应！是的，我可以在上面的沙箱中看到相同的问题。然而，我找到了一个解决办法。将类活动添加到标签解决了此问题。谢谢当页面刷新时，或者直接打开更新页面URL时，我仍然看到了问题。如果通过React链接导航，则不会出现问题。我可以在windows上的chrome和ff中看到正确的标签。它是否与浏览器相关？那么它是物化的还是物质化的ui？请您更精确一点，首先写下这段代码应该添加到哪里。您的建议不清楚，因为常量
值
没有在代码段中使用。@223塞内卡，我删除了常量，并在输入示例中添加了示例。顺便说一下，控制台中存在未定义值的警告。我在这里是因为我在查看控制台输出之前搜索了堆栈溢出。因为控制台中有一个警告，我倾向于避免使用
| |'
模式，并寻找传递
未定义的
的根本原因。最新的原因是，在我编写的一些旧代码中，我传递了
{}
，而不是在JSON对象不可用时不呈现父组件。看起来，如果在页面第一次呈现时“value”为null，那么这个问题会发生并在以后保持，即使该值成为有效字符串。似乎是个bug。用双等于检查'==null'就足够了。这对于没有默认值的日期字段非常有用well@FelixGeenen对我的问题是日期字段太多。但它在所有情况下都能工作。这也解决了我面临的问题，将加载的默认值设置为True以解决问题