gpt4 book ai didi

javascript - 选中复选框时如何防止浏览器滚动到页面顶部?

转载 作者:行者123 更新时间:2023-11-28 03:57:45 25 4
gpt4 key购买 nike

我知道我们可以在 stackoverflow 上找到很多类似的问题。我正在使用 ReactJS。

<body>
<table>
<tbody>
<tr>
<td>
<input type="checkbox" id="checkbox1">
<p>Check 1</p>
<a></a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="checkbox1">
<p>Check 2</p>
<a></a>
</td>
</tr>
</tbody>
</table>
</body>

这是我正在使用的示例。有超过 35 个复选框,每当我点击其中任何一个时,页面就会跳到顶部。[![在此处输入图片描述][1]][1]

正如我在带有 100 个复选框的简单 html 页面上尝试的那样,它工作正常,但在我的 React 代码中。有跳跃

这是我处理更改事件的方式:

<input type="checkbox" onChange={this.props.checkedList} name="article" value={item.id}/>

checkedList(e) {
let id = e.target.value
if (this.state.marked.includes(id)) {
let filteredArray = this.state.marked.filter(item => item !== id)
this.setState({marked: filteredArray});
}
else {
this.setState({marked: this.state.marked.concat(id)});
}
}

最佳答案

当您在事件中调用 setState 时,它​​会导致呈现状态为 marked 的组件。您应该使用组件中的局部变量来处理标记的数组或处理 shouldComponentUpdate。详情可以找here如何使用它。

关于javascript - 选中复选框时如何防止浏览器滚动到页面顶部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43362439/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com