MUI TextareaAutosize经styled包装后输入字符需重点击的问题求助

问题成因 #

你把StyledTextarea的定义放在了Hello组件内部，每次输入文本触发setText更新状态时，组件会重新渲染，这时候内部定义的StyledTextarea会被重新创建——对React来说，这相当于一个全新的组件类型。React会卸载之前的文本框，重新挂载新的，自然就会导致焦点丢失，必须重新点击才能继续输入。

另外你提供的问题代码里，styled的定义还存在语法错误（缺少闭合的括号和分号），这也可能加重组件渲染的异常。

解决方法 #

把StyledTextarea的定义移到组件外部，让它只被创建一次，不会随组件重渲染而重复生成，同时补全语法错误。

修正后的代码 #

import { useState } from 'react';
import TextareaAutosize from '@mui/material/TextareaAutosize';
import styled from '@mui/material/styles/styled';

// 将styled组件定义在组件外部，确保只创建一次
const StyledTextarea = styled(TextareaAutosize)(({ theme }) => `
  border-radius: 12px 12px 0 12px;
`);

const Hello = ()=> {
    const [text, setText] = useState('');
    const handleTextChange = (event) => {
        setText(event.target.value);
    };

    return (
        <div>
            <StyledTextarea
                value={text}
                onChange={handleTextChange}
                autoCorrect='false'
                minRows={15}
            />
        </div>
    );
};

export default Hello;

内容的提问来源于stack exchange，提问作者nayounsang