这是因为您在另一个组件中定义了一个组件，因此每次呈现组件时都会重新创建组件定义（而每次用户键入输入时，您的组件都会呈现）。
两种解决方案：
1.不要将其作为单独的组件。
代替：

const MyComponent = () => {
  const MyInput = () => <div><input /></div>; // you get the idea

  return (
    <div>
      <MyInput />
    </div>
  );
};

应执行：

const MyComponent = () => {    
  return (
    <div>
      <div><input /></div> {/* you get the idea */}
    </div>
  );
};

1.在其父零部件外部定义零部件：

const MyInput = ({value, onChange}) => (
  <div>
    <input value={value} onChange={onChange} />
  </div>
);

const MyComponent = () => {
  const [value, setValue] = useState('');

  return (
    <div>
      <MyInput
        value={value}
        onChange={event => setValue(event.target.value)}
      />
    </div>
  );
};

对于MUI V5
已将自定义样式的代码移到组件之外
例如：

import React from 'react';
import { useTheme, TextField, styled } from '@mui/material'; 
import { SearchOutlined } from '@mui/icons-material';

interface SearchInputProps {   placeholder?: string;   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;   value: string; dataTest?: string; }

const StyledSearchInput = styled(TextField)(({ theme }: any) => {   return {
    '& .MuiOutlinedInput-root': {
      borderRadius: '0.625rem',
      fontSize: '1rem',
      '& fieldset': {
        borderColor: `${theme.palette.text.secondary}`
      },
      '&.Mui-focused fieldset': {
        borderColor: `${theme.palette.primary}`
      }
    }   }; });

const SearchInput: React.FC<SearchInputProps> = ({   placeholder = 'Search...',   onChange,   value,   dataTest,   ...props }) => {   const theme = useTheme();

  return (
    <StyledSearchInput
      {...props}
      onChange={onChange}
      placeholder={placeholder}
      variant="outlined"
      value={value}
      inputProps={{ 'data-testid': dataTest ? dataTest : 'search-input' }}
      InputProps={{
        startAdornment: (
          <SearchOutlined
            sx={{ color: theme.palette.text.secondary, height: '1.5rem', width: '1.5rem' }}
          />
        )
      }}
    />   ); };

export default SearchInput;

注意你的组件的键，如果你把动态值设置为键属性，也会导致焦点丢失。

{people.map(person => (
    <div key={person.name}>
      <Input type="text" value={person.name} onChange={// function which manipulates person name} />
    </div>
))}