React与Material UI Core中Autofill点击选项无响应问题

你遇到的问题是密码管理器能显示填充选项，但点击后无法填入输入框，这通常是浏览器自动填充机制无法正确识别输入框，或者Dialog的渲染特性干扰了关联逻辑，以下是几个可行的解决方法：

1. 为输入框添加标准autocomplete属性 #

浏览器依赖标准的autocomplete属性来识别输入框类型，给用户名和密码输入框明确指定该属性，能帮助密码管理器正确关联：

import * as React from 'react';
import { Dialog, DialogActions, Button, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core';

export default function FormDialog() {
    const [open, setOpen] = React.useState(true);
    const handleClose = () => setOpen(false);

    return (
        <div>
            <Dialog open={open} onClose={handleClose}>
                <DialogTitle>登录</DialogTitle>
                <DialogContent>
                    <DialogContentText>
                        请输入用户名和密码登录，我们会定期发送更新通知。
                    </DialogContentText>
                    <form>
                        <label>
                            <input
                                type="text"
                                name="username"
                                placeholder="用户名"
                                required
                                autocomplete="username"
                            />
                        </label>
                        <label>
                            <input 
                                type="password" 
                                name="password" 
                                placeholder="密码" 
                                required 
                                autocomplete="current-password"
                            />
                        </label>
                        <button type="submit">登录</button>
                    </form>
                </DialogContent>
                <DialogActions>
                     <Button onClick={handleClose}>取消</Button>
                     <Button type="submit">登录</Button>
                </DialogActions>
            </Dialog>
        </div>
    );
}

2. 使用Material-UI TextField组件替代原生input #

Material-UI的TextField组件已经内置了对浏览器自动填充的兼容处理，能避免原生input在Dialog中可能出现的DOM层级问题：

import * as React from 'react';
import { Dialog, DialogActions, Button, DialogContent, DialogContentText, DialogTitle, TextField } from '@material-ui/core';

export default function FormDialog() {
    const [open, setOpen] = React.useState(true);
    const handleClose = () => setOpen(false);

    return (
        <div>
            <Dialog open={open} onClose={handleClose}>
                <DialogTitle>登录</DialogTitle>
                <DialogContent>
                    <DialogContentText>
                        请输入用户名和密码登录，我们会定期发送更新通知。
                    </DialogContentText>
                    <form id="login-form">
                        <TextField
                            fullWidth
                            margin="normal"
                            label="用户名"
                            name="username"
                            required
                            autoComplete="username"
                        />
                        <TextField
                            fullWidth
                            margin="normal"
                            label="密码"
                            type="password"
                            name="password"
                            required
                            autoComplete="current-password"
                        />
                    </form>
                </DialogContent>
                <DialogActions>
                     <Button onClick={handleClose}>取消</Button>
                     <Button type="submit" form="login-form">登录</Button>
                </DialogActions>
            </Dialog>
        </div>
    );
}

3. 调整Dialog的渲染挂载方式 #

如果以上方法无效，可以尝试关闭Dialog的portal特性，让Dialog渲染在当前组件的DOM树中，而不是默认的body下，帮助浏览器正确识别输入框：

// 在Dialog组件中添加disablePortal属性
<Dialog open={open} onClose={handleClose} disablePortal>
  // ... 其余内容不变
</Dialog>

这些方法都是通过让浏览器更准确识别输入框类型或调整渲染结构，来强制触发自动填充功能的正常工作。

内容的提问来源于stack exchange，提问作者Jan Curmi