Как исправить проблему с потерей отслеживания событий на входах после перенаправления в reach-router - PullRequest
Новая
       22

Как исправить проблему с потерей отслеживания событий на входах после перенаправления в reach-router

1 голос
/ 30 марта 2020

технический стек: "@reach/router": "1.3.1", "react": "16.12.0". У меня проблема с потерей фокуса / потерей отслеживания событий при вводе текста в одном из моих компонентов.

Пример моей структуры: 

function HomeView = () => {
   return (
     <div>
        <h1>Home View</h1>
        <Link to="/document-upload-view">Add document</Link>
     </div>
   )
}

const FileComponent = ({data, setData}) => {
   return <input type="file" onChange={file => setData({...data, file: file})} />
}

const TitleComponent = ({data, setData}) => {
   return <input type="text" value={data.title} onChange={e => setData({...data, title: e.target.value)} />
}

function DocumentUploadView = ({sendFile}) => {
    const [stage, setStage] = useState(1);
    const [data, setData] = useState({title: "", file: null})
    enter code here
    function handleStageDisplay = () => {
        if(stage === 1) {
          return <FileComponent data={data} setData={setData}/>
        }
        else if (stage === 2) {
         return <TitleComponent data={data} setData={setData}/>
       }
    }

    return (
     <div>
     {handleStageDisplay()}
     <button onClick={stage === 1 ? setStage(2) : sendFile(data)}>{stage === 1 ? "Next step" : "send data"} </button>
     </div>
    )
}

function MainComponent = () => {
   return (
     <div>
        <DocumentUploadView />
        <HomeView />
     </div>
   )
}

Итак, структура выглядит так: у меня есть компонент основного вида и два разных маршрута: "/ home" и "/ document-upload-view ». Когда я нажимаю на элемент Link, он перенаправляет меня в DocumentUploadView, и я могу заполнить ввод этапа 1, затем нажать «Далее» и появляется второй этап. Я могу заполнить текстовый ввод и отправить файл с импортированной функцией sendFile.

Функция sendFile отправляет данные на сервер, а затем, после успеха, перенаправляет меня с помощью навигации («/ home»). Он отлично работает в первый раз. Если я хочу загрузить документ во второй раз и нажать кнопку Add document, которая перенаправляет меня на страницу загрузки, происходит что-то странное. Первый этап прекрасно работает, а второй этап не работает. Все появляется, я могу указать ввод и написать что-то, но обработчик событий не обнаруживает никаких событий. Я пытался сфокусировать ввод после события onClick и console.log (e.target) или даже console.log (e), но он ничего не показывает.

Впервые он работает хорошо События регистрируются в консоли. Что-то происходит после действия Redirect. Я пытался использовать реагирующий маршрутизатор вместо досягаемого маршрутизатора, но он не работает.

Есть идеи, что здесь происходит? Почему действие перенаправления вызывает это? Я использую крючки, но я пытался использовать классы без усилий. Я проверял путь каждого шага с кем-то еще, и мы не заметили ничего, что могло бы привести к потере фокуса или потере способности ловить события с помощью ввода.

...