const Test: React.FC = () => {
const [searchStr, setSearchStr] = React.useState('');
const handleSearch = () => {
console.log('search', searchStr);
};
return (
<div>
<Input.TextArea
value={searchStr}
autoSize={{ minRows: 1, maxRows: 4 }}
placeholder='输入内容开始查询(Enter发送,Ctrl+Enter换行)'
maxLength={1000}
onChange={(e) => setSearchStr(e.target.value)}
onPressEnter={(e) => {
// FIXME 优化为在光标位置处换行
if (!e.ctrlKey && e.code === 'Enter') {
e.preventDefault();
handleSearch();
} else if (e.code === 'Enter') {
// 换行,获取光标位置
const lastIdx = searchStr.length;
const target = e.target as HTMLInputElement;
const startIdx = target.selectionStart || lastIdx;
const endIdx = target.selectionEnd || lastIdx;
console.log(startIdx, endIdx, searchStr.slice(0, startIdx) + '\n' + searchStr.slice(endIdx));
setSearchStr((val) => val.slice(0, startIdx) + '\n' + val.slice(endIdx));
// 设置光标位置
setTimeout(() => {
target.selectionStart = startIdx + 1;
target.selectionEnd = startIdx + 1;
}, 0);
}
}}
/>
<div className='flex items-center ml-2 text-c3'>
<span>{searchStr.length}/1000</span>
<Button
type='text'
onClick={handleSearch}
className='w-10 h-10 ml-2 py-0'
icon={<span className='iconfont icon-send text-2xl hover:text-blue'></span>}
></Button>
</div>
</div>
);
};
09-02