在外部单击时，文本区域变为div。

Question

我正在尝试创建一个带有react和顺风的文本区域，我可以在其中输入文本，当我单击文本区域外部时，它会变成一个普通的div，显示以前在文本区域中输入的文本。我正在努力将文本区域替换为编辑器作为下一步，以便当我单击编辑器内部时，我可以编辑文本，当我单击外部文本时，显示为div。有人能帮我吗？

import React, { useRef, useEffect, useState } from "react";


function DraftPage(props) {
   const [isSelected, setIsSelected] = useState(false)
   let text = "fff";
    useEffect(() => {
        if (!isSelected)
            document.addEventListener('click', handleClickOutside, true)
        else
            document.addEventListener('click', handleClickOutsideActive, true)

    },[])

    const handleClickOutside = (e) => {
        if (refOne.current!= null)
            if (refOne.current.contains(e.target)) {
                console.log("clicked inside...")
                text = e.target.value;
                setIsSelected(true);

                }
    }

    const handleClickOutsideActive = (e) => {
            if (refTwo.current!=null )
                if (isSelected && !refTwo.current.contains(e.target)) {
                    console.log("clicked outside...")
                    setIsSelected(false);
                    }
        }




    const refOne = useRef(null);
    const refTwo = useRef(null);
    const res1 = <div ref={refTwo}><textArea  placeholder={text} class="w-[750px] h-[200px] border
    border-4 border-red-400 m-10 bg-gray-100"></textArea></div>
    const res2 = <div ref={refOne}  class="w-[750px] h-[200px] border border-4 border-green-700
    bg-green-300 m-10">{text}</div>

  return <div>{isSelected ? res1 : res2}</div>
}


export default DraftPage;

Answer 1

您不需要使用useRef和外部单击处理程序。对于未选定的案例，您可以处理textarea的textarea事件，对于所选的案例，可以处理div的onClick事件。

import React, { useState } from "react";

function DraftPage(props) {
  const [isSelected, setIsSelected] = useState(false);
  const [text, setText] = useState("fff");

  const res1 = (
    <div>
      <textarea
        onBlur={() => setIsSelected(false)}
        value={text}
        onChange={(e) => setText(e.target.value)}
        className="w-[750px] h-[200px] border
    border-4 border-red-400 m-10 bg-gray-100"
      ></textarea>
    </div>
  );
  const res2 = (
    <div
      style={{ whiteSpace: "pre-line" }}
      onClick={() => setIsSelected(true)}
      className="w-[750px] h-[200px] border border-4 border-green-700
    bg-green-300 m-10"
    >
      {text}
    </div>
  );

  return <div>{isSelected ? res1 : res2}</div>;
}

export default DraftPage;

您可以查看这个沙箱，以获得这段代码的实际工作示例。