Javascript 如何通过单击按钮在材质ui文本字段上伪造焦点？

我的web应用程序有一种间接填充文本字段的方法，由于它是多次单击（对于上下文，它是一个日历）和多个字段，我想在他们单击“下一步”按钮时显示他们填充的字段的用途

我无法将焦点放在文本字段本身。这会让用户离开他们正在点击的界面

我有这个工作输入，但我不能让这个工作文本字段。下面是两组代码，具体来说，我错在哪里

文本字段（不工作）

import React，{useState，useRef，useffect}来自“React”；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core”导入{Button，TextField}”；
const useStyles=makeStyles（主题=>({
根目录：{
"& > *": {
页边空白：主题。间距（1）
}
}
}));
导出默认函数输入（）{
const classes=useStyles（）；
const[focused，setFocused]=使用状态（false）；
const focusedRef=useRef（）；
常量ToggleFocusOneElement=（）=>{
setFocused（prevFocused=>！prevFocused）；
};
useffect（（）=>{
如果（聚焦）{
focusedRef.current.classList.add（“Mui聚焦”）；
}否则{
focusedRef.current.classList.remove（“Mui聚焦”）；
}
}，[重点]；
返回(
{聚焦？“移除”：“假”}聚焦
);
}

输入（工作）

import React，{useState，useRef，useffect}来自“React”；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core”导入{按钮，输入}；
const useStyles=makeStyles（主题=>({
根目录：{
"& > *": {
页边空白：主题。间距（1）
}
}
}));
导出默认函数输入（）{
const classes=useStyles（）；
const[focused，setFocused]=使用状态（false）；
const focusedRef=useRef（）；
常量ToggleFocusOneElement=（）=>{
setFocused（prevFocused=>！prevFocused）；
};
useffect（（）=>{
如果（聚焦）{
focusedRef.current.classList.add（“Mui聚焦”）；
}否则{
focusedRef.current.classList.remove（“Mui聚焦”）；
}
}，[重点]；
返回(
{聚焦？“移除”：“假”}聚焦
);
}

---

有没有办法绕过这个限制，或者有更好的办法来伪造焦点？

我认为您只需调用HTML控件的

focus（）

和

blur（）

方法即可。 这将自动为元素提供/移除焦点，并实现您想要实现的目标

constToggleFocusOneElement=（）=>{
setFocused（prevFocused=>！prevFocused）；
如果（聚焦）{
focusedRef.current.blur（）；
}否则{
focusedRef.current.focus（）；
}
};

InputRef={focusedRef}

和

InputProps={{ref'：focusedRef}}

不一样。

import React，{useState，useRef，useffect}来自“React”；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core”导入{Button，TextField，Input}”；
const useStyles=makeStyles（主题=>({
根目录：{
"& > *": {
页边空白：主题。间距（1）
}
}
}));
导出默认函数输入（）{
const classes=useStyles（）；
const[focused，setFocused]=使用状态（false）；
const focusedRef=useRef（）；
常量ToggleFocusOneElement=（）=>{
setFocused（prevFocused=>！prevFocused）；
};
useffect（（）=>{
如果（聚焦）{
focusedRef.current.classList.add（“Mui聚焦”）；
}否则{
focusedRef.current.classList.remove（“Mui聚焦”）；
}
}，[重点]；
返回(
{聚焦？“移除”：“假”}聚焦
);
}

---

我不确定为什么会这样，但我可以确认上述代码在codesandbox中对我有效。

以Mui为中心的

类需要应用于
类。
inputRef
prop在
元素本身上放置一个ref，而
inputRef
上的
ref
（无论是直接输入还是通过TextField InputProps）是无效的

我建议您根本不要为此使用refs或
useffect
，只需更直接地应用类名：

        <TextField
          InputProps={{ className: focused ? "Mui-focused" : undefined }}
          defaultValue="Hello world"
        />



ahhh，但我想伪造焦点，而不是将光标实际放在文本字段中，因此这不起作用。我会说得更清楚。我使用的
useffect
是为了在问题中展示这一点。设置类名不会覆盖应用的类吗？但它与通过ref操作类名有关，但是如果您将
作为状态进行管理，根本没有理由使用ref——您可以通过React操作className prop。如果您不是在实际管理
聚焦的
状态，而是在事件处理程序中强制执行所有这些操作，那么使用ref是有意义的。我不是在实际管理状态IRL中的聚焦。但无论如何，这是一个很好的答案。