reactjs - 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

问题是您正在为 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>
  );
}