TextField 在每次击键时失去焦点

Question

我在对话框中有一个 MUI 文本字段。每次击键时，整个对话框都会重新呈现，并且文本字段上的焦点会丢失。我添加的每个新角色都是持久的。

这是我的对话框，文本字段和

onChange

位于其中。

const [action, setAction] = useState("");
function ActionDialog() {
    return (
        <Dialog open={open} onClose={handleClose} fullWidth maxWidth="sm">
            <DialogTitle>Action ID: {open}</DialogTitle>
            <DialogContent>
                <TextField
                    value={action?.Comment}
                    onChange={(e) => {
                        setAction((prev) => {
                            return { ...prev, Comment: e.target.value };
                        });
                    }}
                    label="Comment"
                    variant="outlined"
                    size="small"
                />
            </DialogContent>
        </Dialog>
    );
}

Answer 1

您的状态变量在

ActionDialog

组件之外声明是否有原因？这是因为

ActionDialog

组件是在另一个父组件中声明的吗？ 如果是这种情况，每次状态变量更改时，都会创建 ActionDialog 组件的新实例。为了让事情变得更简单，请将状态变量设置为设置状态的组件的本地变量。

Answer 2

确保某些父组件不会重新渲染。您可以使用react开发工具，记录包含onchange的会话。如果你的父母之一被重新渲染，你将失去输入的焦点