React - 材质 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

问题是您正在为 inputComponent 属性定义内联组件类型。这意味着每次重新渲染时，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>
  );
}

Answer 2

你犯了一个简单的错误

只需将InputProps 替换为inputProps

代码沙盒：https://codesandbox.io/s/intelligent-feather-4thqf?file=/src/App.js:423-433