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>
  );
};

因為我在我自己的 state 中使用受控輸入，所以輸入無法正常工作......每次嘗試輸入某些內容時，輸入都會失去焦點，所以我需要輸入每個字符/數字並再次單擊輸入以集中注意力，這樣我就可以繼續打字了

如果不正確使用不受控制的輸入，它將正常工作

這是一個正在發生的例子： 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