React - Material UI - TextField 控制的输入与自定义输入组件无法正常工作失去焦点

Question

我正在尝试从 Material UI 实现 TextField 组件的自定义输入元素

例子 ：

export const InputsPage: React.FC = () => {
  const [value, setValue] = useState('');
  return (
    <Paper>
      <Box p={2}>
        <TextField
          value={value}
          onChange={(e) => {
            setValue(e.target.value);
          }}
          color='primary'
          label='FROM'
          placeholder='Placeholder'
          InputProps={{
            inputComponent: ({ inputRef, ...rest }) => <input ref={inputRef} {...rest} type='text' />,
          }}
        />
      </Box>
    </Paper>
  );
};

因为我在自己的状态下使用受控输入，所以输入无法正常工作...每次尝试输入某些内容时，输入都会失去焦点，因此我需要输入每个字符/数字，然后再次单击输入以确定焦点，以便我可以继续打字

如果我使用不受控制的输入，它会正常工作

这是发生的情况的示例：codeSandbox

Answer 1

问题是您正在定义inputComponentprop 的内联组件类型。这意味着每次重新渲染时，React 都会将其视为新的组件类型，因此该元素将被重新挂载（从 DOM 中完全删除并重新添加），而不仅仅是重新渲染，从而导致焦点被丢失的。

CustomInputComponent您可以通过在顶层定义组件类型（在示例中）来解决此问题，如下例所示：

import React, { useState } from "react";
import "./styles.css";
import { TextField } from "@material-ui/core";
const CustomInputComponent = ({ inputRef, ...rest }) => (
  <input ref={inputRef} {...rest} type="text" />
);
export default function App() {
  const [value, setValue] = useState("");
  return (
    <div className="App">
      <TextField
        value={value}
        onChange={(e) => {
          setValue(e.target.value);
        }}
        color="primary"
        label="FROM"
        placeholder="Placeholder"
        InputProps={{
          inputComponent: CustomInputComponent
        }}
      />
    </div>
  );
}