Question

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

＆＃13;

<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>

＆＃13;

这是我正在使用的一个例子。有超过35个复选框，每当我点击其中任何一个时，页面都会跳到顶部。[！[在此输入图像描述] [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)});
}
}

Answer 1

您可以使用aria-label="test"。

示例：

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

aria-label属性用于定义标记的字符串当前元素。在文本标签不可见的情况下使用它屏幕。（如果有可见文本标记元素，请使用 aria-labelledby。）

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

Answer 2

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

选中此复选框后，如何阻止浏览器滚动到页面顶部？

2 个答案: