React Material UI 标签与文本重叠

Posted 2023-02-22

【中文标题】React Material UI 标签与文本重叠

【英文标题】：React Material UI Label Overlaps with Text

【发布时间】：2018-11-30 00:33:03

【问题描述】：

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

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

使用这种方法，预期的功能可以正常工作。但是，所有文本字段的标签都与其值重叠。请看下面的截图：

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

此应用程序的完整源代码可在此处找到： 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

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

【问题讨论】：

您能否确认您在此沙盒codesandbox.io/s/rwyj71lvx4 中看到了相同的故障？

感谢 Evgeny 的快速回复！是的，我可以在上面的沙箱中看到同样的问题。但是，我找到了一种解决方法。将活动类添加到标签解决了这个问题。谢谢！

当页面刷新或者直接打开更新页面 URL 时，我仍然看到问题。如果通过 React Link 导航，则不会出现此问题。

我可以在 windows 上的 chrome 和 ff 中看到正确的标签。可以是浏览器相关的吗？

那么是materialize还是material-ui？

【参考方案1】：

这是由于值的未定义状态。

这个解决方法对我来说是一种后备：

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

例如对于 Material-UI

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

【讨论】：

能否请您更精确一些，并写下这段代码首先应该添加到哪里。

您的建议不清楚，因为代码 sn-p 中没有使用常量value。

@223seneca，我删除了 const 并在输入示例中添加了示例。

顺便说一句，控制台中未定义值的警告。我在这里是因为我在查看控制台输出之前搜索了 Stack Overflow。因为控制台中有一个警告，我倾向于避免使用|| '' 模式并找到它被传递undefined 的根本原因。最新的原因是因为在我编写的一些旧代码中，我传递了，而不是在 JSON 对象不可用时不渲染父组件。

似乎如果在页面第一次渲染时“value”为空，这个问题就会出现并一直存在，即使在该值成为有效字符串之后，稍后也是如此。看起来像一个错误。

【参考方案2】：

InputLabel 有一个属性 shrink。您可以在 TextField 中使用，如下所示：

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

【讨论】：

这对于没有默认值的日期字段也非常有用

@FelixGeenen 是的。我的问题也与日期字段有关。但它适用于所有情况

【参考方案3】：

我通过使用一个条件来解决这个问题，如果它不是 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)
                  />

【讨论】：

用双等号检查'== null'就足够了。

【参考方案4】：

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

我尝试了以下方法，效果很好。 基本上，表单首先呈现为空而没有数据；然后 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>
);

【讨论】：

这也解决了我面临的问题，将加载的默认值设置为 True 解决了问题

【参考方案5】：

我可以说任何对我有用的都可以试试。

这是基于功能的组件。

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

【参考方案6】：

以下工作：

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

InputLabelProps react 中的功能组件出错。

【参考方案7】：

利用 InputLabelProps=shrink: true，你可以添加一个 state 和一个 onSelect 来切换收缩状态

const [shrink1, setShrink1] = useState(false)

<TextField
            fullWidth
            id='filled-basic'
            label='Name'
            variant='filled'
            value=formState.name
            onChange=(event) => setFormState( name: event.target.value )
            onSelect=() => setShrink1(true)
            InputLabelProps= shrink: shrink1 
          />