使用 React 和 Material UI 核心选择项目时自动填充不起作用答案

【问题标题】：Autofill not working when selecting the items with React and Material UI core使用 React 和 Material UI 核心选择项目时自动填充不起作用
【发布时间】：2023-02-24 04:44:37
【问题描述】：

使用 React 和 Material-UI 核心。

我正在尝试使用自动填充来填写输入。密码管理器确实显示在输入上，但是当我单击该项目时，什么也没有发生。

有没有办法强制它工作？

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);

    return (
        <div>
            <Dialog open={open} onClose={handleClose}>
                <DialogTitle>Subscribe</DialogTitle>
                <DialogContent>
                    <DialogContentText>
                        To subscribe to this website, please enter your email address here. We will send updates
                        occasionally.
                    </DialogContentText>
                    <form>
                        <label>
                            <input
                                type="text"
                                name="username"
                                placeholder="Username"
                                required
                            />
                        </label>
                        <label>
                            <input type="password" name="password" placeholder="Password" required />
                        </label>
                        <button type="submit">Login</button>
                    </form>
                </DialogContent>
                <DialogActions>
                     <Button>Subscribe</Button>
                </DialogActions>
            </Dialog>
        </div>
    );
}

【问题讨论】：

标签： reactjs react-hooks material-ui

【解决方案1】：

将自动完成属性添加到密码输入字段：

<input
    type="password"
    name="password"
    placeholder="Password"
    autocomplete="current-password"
    required
/>

用户名字段的相同方法：

<input
    type="text"
    name="username"
    placeholder="Username"
    autocomplete="username"
    required
/>

有关此主题的更多信息，请访问https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

【讨论】：