时间戳

首页 > 解决方案 > React OnChange 每次都重新加载 DOM

javascript - React OnChange 每次都重新加载 DOM

问题描述

我有一个带有 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() 函数。这也无济于事！我究竟做错了什么？

标签： javascripthtmlreactjsreact-nativereact-redux

解决方案

问题解决了：

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

推荐阅读