最终效果就是实现该输入框:
- 添加话题时,话题自动插入到输入框前面
- 多文本输入框左侧间距为话题的宽度
- 多行文本时,第二行紧接开头渲染
- 删除文本时,如果删除到话题,再次删除,话题被删除
- 首先构造div结构
const [hashtag, setHashtag] = useState(""); // 话题内容
const [textIndent, setTextIndent] = useState("0px"); // 动态缩进
const hashtagRef = useRef(null);
const [value, setValue] = useState("");
const [focus, setFocus] = useState(false);
<div className="topInput">
<div className="topiceShow" ref={hashtagRef}>
{hashtag}
</div>
<TextArea
value={value}
onChange={(e) => setValue(e.target.value)}
onInput={TextAreaInput