Question

我在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

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

Answer 2

我通过使用条件（如果条件不是 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)}
                  />

Answer 3

InputLabel有一个道具shrink。您可以在TextField中使用如下所示：

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

Answer 4

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

我尝试了以下方法，但效果很好。基本上，首先将表单清空为没有数据；然后useEffect正在获取数据并填充数据。我设置了一个isLoading状态变量-最初将其设置为true，并在通过API获取数据后将其设置为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>
);

}

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

Answer 6

以下工作：

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

InputLabelProps 在 React 的功能组件中出错。

Answer 7

利用InputLabelProps={{shrink: true}}，你可以添加一个状态和一个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 }}
          />

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

7 个答案: