Переменная 'dataURI' изнутри React Hook useEffect будет потеряно после каждого рендера - PullRequest
Новая
       48

Переменная 'dataURI' изнутри React Hook useEffect будет потеряно после каждого рендера

0 голосов
/ 25 марта 2020

Я хотел бы перевести приведенную ниже функцию, написанную ванильным javascript, на функцию реагирования. Приведенная ниже функция позволяет пользователю щелкнуть по входу изображения и добавить изображение к текстовой области, которая содержит класс «.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);
      }
    }

Это то, что я до сих пор делал в своем компоненте реагирования ... Я получаю следующие сообщения об ошибках

Ошибка типа: editor.pu sh не является функцией

Инструменты. 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)
        }
    };

Редактор. js компонент: 

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

1 Ответ

0 голосов
/ 26 марта 2020

не 

editor.push(img);

do 

editor.current.push(img);

относительно реакции do c говорит

По сути, useRef походит на «коробку» который может содержать изменяемое значение в своем свойстве .current.

вам необходимо использовать атрибут .current для ссылки

в родительском компоненте, который содержит редактор. js и панели инструментов. js компонентов, там должна быть переменная ref, например 

import Toolbar from "./toolbar.js"
import Editor from "./editor.js"

const parent = () => {
  const editorRef = useRef(null);

  /// other code for your component 

  return (
      <div>
          <Editor
            // other props
            editorRef = {editorRef}
            />
          <Toolbar  
            // other props
            editor= {editorRef}
          />
      </div>
   );


}

и в редакторе. js Файл делает это

Editor.js


const editorComponent = props => {

    // some other code

   return (
       <div ref={props.editorRef}> // will be available because we are passing it 
                                   // in the parent component
       </div>

    );
}

и теперь в вашем

Toolbar.js вы можете получить доступ к этому редактору следующим образом.

props.editor

это будет работать, потому что editor сохраняется в компоненте, который содержит компоненты Toolbar и Editor.

...