javascript - 如何通过单击按钮来伪造 Material-ui TextField 上的焦点？

Question

我的网络应用程序有一种间接填写文本字段的方法，并且由于它是多次单击(对于上下文，它是一个日历)和多个字段，我想向用户展示他们在填写时所填写的字段单击下一步按钮。

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

我可以将其用于输入，但无法将其用于文本字段。下面是具体的两套代码，我哪里出错了？

文本字段(不起作用)

import React, { useState, useRef, useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Button, TextField } from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  root: {
    "& > *": {
      margin: theme.spacing(1)
    }
  }
}));

export default function Inputs() {
  const classes = useStyles();
  const [focused, setFocused] = useState(false);
  const focusedRef = useRef();
  const toggleFocusOnElement = () => {
    setFocused(prevFocused => !prevFocused);
  };
  useEffect(() => {
    if (focused) {
      focusedRef.current.classList.add("Mui-focused");
    } else {
      focusedRef.current.classList.remove("Mui-focused");
    }
  }, [focused]);
  return (
    <>
      <Button onClick={toggleFocusOnElement}>
        {focused ? "Remove" : "Fake"} focus
      </Button>
      <form className={classes.root} noValidate autoComplete="off">
        <TextField
          inputRef={focusedRef}
          defaultValue="Hello world"
          inputProps={{ "aria-label": "description" }}
        />
      </form>
    </>
  );
}

输入(工作)

import React, { useState, useRef, useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Button, Input } from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  root: {
    "& > *": {
      margin: theme.spacing(1)
    }
  }
}));

export default function Inputs() {
  const classes = useStyles();
  const [focused, setFocused] = useState(false);
  const focusedRef = useRef();
  const toggleFocusOnElement = () => {
    setFocused(prevFocused => !prevFocused);
  };
  useEffect(() => {
    if (focused) {
      focusedRef.current.classList.add("Mui-focused");
    } else {
      focusedRef.current.classList.remove("Mui-focused");
    }
  }, [focused]);
  return (
    <>
      <Button onClick={toggleFocusOnElement}>
        {focused ? "Remove" : "Fake"} focus
      </Button>
      <form className={classes.root} noValidate autoComplete="off">
        <Input
          ref={focusedRef}
          defaultValue="Hello world"
          inputProps={{ "aria-label": "description" }}
        />
      </form>
    </>
  );
}

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

Answer 1

Mui-focused类需要应用于 <div>那contains the <input> element 。 inputRef prop 将引用放在 <input> 上元素本身，而 ref上Input (无论是直接还是通过 TextField InputProps)是 placed on the containing div .

我建议您不要使用 refs 或 useEffect为了这个目的，只需更直接地应用类名:

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