首先 博主遇见的场景是像下面的场景类似, 首先页面并没有渲染出input.TextArea组件,而是span 与 Button 组件先渲染,然后inputRef为空,没有挂载到input.TextArea。
当与用户交互且用户点击了button组件后flag转变成为1的时候, input才会被渲染出来, 但是useRef的机制就是,它第一创建了后,后面再次执行这个语句的时候会判断其前面存不存在,如果存在的话是不会在创建新的ref, 所以这样inputRef是挂载不到Input.TextArea组件的。
所以我们可以通过把Input.TextArea组件化, 创建一个新的文件(第三个代码块),在这个代码块中为们可以实现 聚焦文本域末端的作用, 且不要忽视了autoSize这个属性的作用。
// 挂载不成功实例
import React, {useRef} from 'react';
import {Input} from 'antd';
import type { InputRef } from 'antd';
const Test: React.FC = () => {
const [flag, setFlag] = useState(0);
const inputRef = useRef<InputRef>(null);
return flag ? (
<Input.TextArea
rows={1}
onChange={(input) => {
handleDebounceSetInputValue(input.target.value);
}}
defaultValue={record.remarks}
showCount
maxLength={100}
/>
) : (
<span className={styles.remarks}>{record.remarks}</span>
<Button type ='primary' onClick={() => setFlag(1)}></Button>
);
}
// 组件化实例
import React, { useEffect, useRef } from 'react';
import { Input } from 'antd';
export const TextArea: React.FC<any> = (props) => {
const inputRef = useRef<any>(null);
useEffect(() => {
inputRef.current!.focus({
cursor: 'end',
});
}, []);
return <Input.TextArea ref={inputRef} {...props} autoSize></Input.TextArea>;
};
// 挂载成功实例
import React, {useRef} from 'react';
import {Input} from 'antd';
import type { InputRef } from 'antd';
const Test: React.FC = () => {
const [flag, setFlag] = useState(0);
const inputRef = useRef<InputRef>(null);
return flag ? (
<TextArea
rows={1}
onChange={(input) => {
handleDebounceSetInputValue(input.target.value);
}}
defaultValue={record.remarks}
showCount
maxLength={100}
/>
) : (
<span className={styles.remarks}>{record.remarks}</span>
<Button type ='primary' onClick={() => setFlag(1)}></Button>
);
}