Блог

Я пытаюсь использовать фокусировку на элементе(текстовая область) после каждого ответа axios. Моя цель состоит в том ,чтобы каждый тип в текстовой области изменял значения выделенной области, но моя проблема заключается в следующем : когда я набираю текстовую область и изменяю значение выделенной области, фокус перемещается с текстовой области на другие элементы страницы, мой код такой:

 import React, {useEffect} from 'react'; import 'antd/dist/antd.css'; import './index.css'; import axios from "axios"; import {useState} from 'react'; import {Layout, Menu} from 'antd'; import {HighlightWithinTextarea} from 'react-highlight-within-textarea' import {Card, Form, Input, Button, Divider} from 'antd';  const {Header, Content} = Layout; const {TextArea} = Input; const Demo = () =gt; {  const [form] = Form.useForm();  const [note, setNote] = useState('');  const [input, setInput] = useState('');  const [output, setOutput] = useState('');  const [inputStar, setInputStar] = useState('');  const areaRef = React.useRef(null);  const [area, setArea] = React.useState(true);  const onChange = (e) =gt; {  var ret = e.replaceAll('**', '');   }  const handelChange = (e) =gt; {  console.log(e.target.value);  var data = {};  data.note = e.target.value;   axios  .post("http://localhost/s1", {  text: data.note,  headers: {  "Content-Type": "application/json"  }  })  .then(response =gt; {  console.log(data.note);   setOutput(response.data.output);  setInput(response.data.input);  })   }  return (  lt;Layout className="layout"gt;   lt;Content style={{padding: '0 50px'}}gt;  lt;Cardgt;  lt;Dividergt;spell checkerlt;/Dividergt;  lt;Form form={form} name="control-hooks" onFinish={onFinish}gt;  lt;Divider orientation="right" plaingt;متن را وارد نمایید lt;/Dividergt;  lt;Form.Item  name="note"   value={note}  onChange={handelChange}gt;  lt;TextArea rows={10}/gt;  lt;/Form.Itemgt;  lt;/Formgt;  lt;Cardgt;  lt;HighlightWithinTextarea  value={input}  onChange={onChange}  highlight={/**[u0600-u06FF]***/gi}  /gt;  lt;HighlightWithinTextarea ref={areaRef}  value={output}  onChange={onChange}  highlight={/**[u0600-u06FF]***/gi}  /gt;   lt;/Cardgt;  lt;/Cardgt; lt;/Contentgt;lt;/Layoutgt;   )   };  export default Demo;