如何更改输入焦点上的 TexField 变体并使用 Material-ui 保持焦点答案

【问题标题】：How to change TexField variant on input focus and maintain the focus using Material-ui如何更改输入焦点上的 TexField 变体并使用 Material-ui 保持焦点
【发布时间】：2021-08-31 07:26:28
【问题描述】：

当用户关注输入时，我想更改 TextField 上的变体。 Bellow sn-p 会这样做，但输入会失去焦点。您需要再次单击输入以集中注意力并在其中写入一些文本

import React, { useState } from 'react'
import { TextField } from '@material-ui/core'
const App = () => {
  const [name, setName] = useState('')
  const [focus, setFocus] = useState(false)

  return <TextField
    variant={focus ? 'outlined' : 'standard'}
    onFocus={(e) => setFocus(true)}
    value={name}
    name='name'
    onChange={(e) => setName(e.target.value)} />
}

沙盒：https://codesandbox.io/s/material-ui-dynamic-variant-7up6q?file=/demo.tsx

我的理解如下：

TextField 组件使用新的道具重新渲染，并正在创建一个新的输入元素来显示，同时销毁旧的。这样，用户在发短信前需要点击输入两次。

我也尝试过 onClick，结果相同。

有没有办法在不失去对输入的关注的情况下获得这些结果？

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

使用“useRef”来聚焦输入，inputRef 属性会帮助你设置 ref。并使用Effect进行跟踪和更新。

  const App = () => {
  const [name, setName] = useState("");
  const [focus, setFocus] = useState(false);
  const inputRef = useRef(null);

  const onFocus = () => {
    setFocus(true);
  };

  const onBlur = () => {
    setFocus(false);
  };

  useEffect(() => {
    if (focus) {
      inputRef.current.focus();
    }
  }, [focus]);

  return (
    <TextField
      variant={focus ? "outlined" : "standard"}
      onFocus={onFocus}
      onBlur={onBlur}
      value={name}
      inputRef={inputRef}
      name="name"
      onChange={(e) => setName(e.target.value)}
    />
  );
};

export default App;

您可以在此处查看演示：链接-https://codesandbox.io/s/material-ui-dynamic-variant-forked-8pbdi?file=/demo.tsx

【讨论】：