如何在选中复选框时阻止浏览器滚动到页面顶部？

我知道我们可以在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>

下面是我在用的一个例子。 [！] [1] [1]

正如我在简单的HTML页面上试过的一样，有100个复选框，它的工作正常，但在我的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)}); 
} 
}

来源

2017-04-12 Rahul Shrivastava

您如何处理Check事件？ –

当你在事件中调用setState时，它会再次渲染组件 –

@RichaGarg评论线条的工作，但你能告诉我应该如何保持检查项目的轨迹 –

当你调用事件的setState，它是造成组件呈现它具有状态marked。您应该使用组件中的本地变量来处理标记或处理shouldComponentUpdate的数组。你可以找到如何使用它的细节here。

来源

2017-04-12 09:21:12

您可能能够使用aria-label="test"。

实施例：

<input aria-label="test" id="test" type="checkbox" />

的咏叹调标签属性用来定义标签的当前元素的字符串。在屏幕上显示时文字标签不可见的情况下使用。（如果有明显的文字标注的元素，使用咏叹调 - labelledby代替。）

参考 - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

来源

2017-04-12 07:04:57

其实它的段落没有标记在我的代码中。 –

我也使用标签也和咏叹调标签，但它没有帮助 –

如何在选中复选框时阻止浏览器滚动到页面顶部？

回答

相关问题