React OnChange 每次都重新加载 DOM答案

【问题标题】：React OnChange Reloads DOM everytimeReact OnChange 每次都重新加载 DOM
【发布时间】：2021-08-17 17:48:47
【问题描述】：

我有一个带有 Form 的功能性 React 组件。表单有多个文本输入

  <Form onSubmit={submitHandler}>
  
    <div className="mb-3">
        <label className="form-label">Role</label>
        <input type="text"  onChange={(e)=>setRole(e.target.value)} className="form-control" id="role" />
    </div>
    
    <div className="mb-3">
        <label className="form-label">Facebook Handle</label>
        <input type="url" onChange={(e)=>setFacebookHandle(e.target.value)} className="form-control" id="FBHandle" />
    </div>
    
    <button type="submit" className="btn btn-primary">Submit</button>
</Form>

我正在使用 React useState 钩子并处理 onChange 事件。以下是相同的代码

const [role,setRole] = useState('')
const [facebookHandle,setFacebookHandle] = useState('')

每当我在文本字段中输入值时，DOM 似乎正在重新加载并将页面滚动到顶部（我上面的输入字段和标签很少）。每次我输入一些值时页面都会向上滚动，这会产生问题。我尝试使用 preventDefault() 函数。这也无济于事！我做错了什么？

【问题讨论】：

请添加stackoverflow.com/help/minimal-reproducible-example

标签： javascript html reactjs react-native react-redux

【解决方案1】：

听起来正在发生的事情是，当您使用 setRole() 更改 role 时，组件会重新渲染（在状态更新时发生）。所以就好像它刷新然后页面返回顶部。所以需要将滚动保存为状态（可以保存到-表单到页面顶部的距离），当页面重新渲染时，使用useEffect(()=> {set the scroll position}, [role])恢复滚动位置。

要获得滚动位置，您可以使用window.pageYOffset

您还可以使用滚动事件侦听器将滚动位置更新为当前位置，这可能会有所帮助： Using React Hooks To Update w/ Scroll

【讨论】：

【解决方案2】：

问题已解决：

问题是由于在嵌套组件中双重包含我的导航栏。在某处，我将窗口滚动 Y 设置为 0，这反过来每次都会启动。

【讨论】：