Я хочу, чтобы моя Textarea сосредоточилась на двойном щелчке для этого, у меня есть компонент ниже
[Игнорировать подключение его просто для CSS]
-> TextArea читается по умолчанию. Установите FALSE, а затем TextAREA должно Foucs
Текущее поведение: состояние Readonly устанавливается на false, а текстовая обработка редактируется, но Textarea.current?export function EditableText({
title,
className,
outlineOnDoubleClick = false,
outlineOnClick = true,
}: EditableInputProps) {
const [inputVal, setInputVal] = useState(title);
const [isEditing, setIsEditing] = useState(false);
const [readOnly, setReadOnly] = useState(true);
const textAreaRef = useRef(null);
const baseClass = `resize-none select-none`;
const outlineDblClass = `${!isEditing && outlineOnDoubleClick ? "outline-none" : ""}`;
const outlineSingleClass = `${outlineOnClick ? "" : !outlineOnDoubleClick && "outline-none"}`;
const finalClass = cn(
baseClass,
outlineSingleClass,
outlineDblClass,
className,
);
return (
setInputVal(e.target.value)}
className={finalClass}
readOnly={readOnly}
onDoubleClick={() => {
setIsEditing(true);
setReadOnly(false);
textAreaRef.current?.focus();
}}
onBlur={() => {
setIsEditing(false);
setReadOnly(true);
}}
/>
);
}
Подробнее здесь: https://stackoverflow.com/questions/796 ... oubleclick
