'React Hook内部useEffect中的'dataURI'变量将在每次渲染后丢失

Posted 2021-04-02

我想将下面用普通javascript编写的函数转换为react函数。下面的功能允许用户单击图像输入并将图像附加到包含类“ .editor”]的文本区域

 function getImage() {
      var file = document.querySelector("input[type=file]").files[0];

      var reader = new FileReader();

      let dataURI;

      reader.addEventListener(
        "load",
        function() {
          dataURI = reader.result;

          const img = document.createElement("img");
          img.src = dataURI;
          document.querySelector(".editor").appendChild(img);
        },
        false
      );

      if (file) {
        console.log("s");
        reader.readAsDataURL(file);
      }
    }
这是我到目前为止在我的react组件中所做的...我收到以下错误消息

TypeError：editor.push不是函数

Tools.js组件：

function Toolbar() {
    const dispatch = useDispatch();

    let inputRef = useRef(null);
    const editor = useRef(null);
    const [selectedFile, setSelectedFile] = useState(null);

    const imgChangeHandler = e => {

        e.preventDefault();
        setSelectedFile(e.target.files[0]);

        let reader = new FileReader();
        let dataURI = reader.result;

        const img = React.createElement("img",{src: dataURI});
        editor.push(img);

        if(selectedFile) {
            console.log("s");
            reader.readAsDataURL(selectedFile)
        }
    };
Editor.js组件：

 <>
            <div className="center">
               <div className="editor" ref={editor} style={editor} contentEditable={true} suppressContentEditableWarning={true}>
                   <h1>{introText}</h1>
                   <p>{subText}</p>
               </div>
            </div>
        </>

我想将下面用普通javascript编写的函数转换为react函数。下面的功能允许用户单击图像输入并将图像附加到文本区域，......>

答案

dont

editor.push(img);