1

技术栈："@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 阶段的输入，然后我可以按 Next 并出现第二阶段。我可以填写文本输入并使用导入的 sendFile 函数发送文件。

sendFile 函数将数据发送到服务器，然后在成功后使用导航（“/home”）重定向我。它第一次完美运行。如果我想第二次上传文档，然后按下Add document将我重定向到上传页面的按钮，就会发生一些奇怪的事情。第一阶段效果很好，第二阶段就不行了。一切都出现了，我可以指向输入并写一些东西，但事件处理程序没有检测到任何事件。我试图在 onClick 事件和 console.log(e.target) 甚至 console.log(e) 之后强制聚焦输入，但它没有显示任何内容。

它第一次运行良好，事件正在控制台中记录。重定向操作后发生了一些事情。我试图使用 react-router 而不是到达路由器，但它不起作用。

知道这里发生了什么吗？为什么重定向操作会导致这种情况？我正在使用钩子，但我试图毫不费力地使用类。我正在与其他人一起检查每一步的路径，我们没有注意到任何可能导致或成为失去焦点或失去通过输入捕获事件的能力的任何事情。

4

0 回答 0