如何更改我的非输入标签的反应？

Posted 2023-02-17

const [text，setText] = useState（'Hello friend'）

返回

<p>text</p>

我如何在光标和朋友之间放置光标并写点东西？它看起来应该像我在p或div标签中编写，而不是我在文本区域或输入中编写。

答案

使用contentEditable属性和useRef：

import React,  useRef  from "react";

export default function App() 
  const text = useRef("Hello friend");

  const handleChange = e => 
    text.current = e.target.innerText
  ;

  return (
    <p contentEditable="true" onInput=handleChange>
      text.current
    </p>
  );

使用useState进行这项工作可能很困难。您可以使用<input>并设置其样式使其看起来像<p>吗？

p 
  border: 0;
  background: transparent;