チェックボックスをオンにすると、ブラウザがページの上にスクロールしないようにするにはどうすればよいですか？

私は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つをクリックするとページがトップにジャンプします。[！] 100のチェックボックスで、その正常に動作しますが、私のリアクションコードにあります。ジャンプ

はここにあり、私は変更イベントを処理しています方法です：

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

ARIAラベル属性は現在の要素をラベル文字列を定義するために使用されます。テキストラベルがの画面に表示されない場合に使用します。（要素をラベル表示されるテキストがある場合は、代わりに ARIA-labelledbyのを使用しています。）

リファレンス - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

出典

2017-04-12 07:04:57

実際には、その段落は自分のコードには表示されません。 –

私はラベルもアリアラベルも使用しましたが、それは役に立たない –

チェックボックスをオンにすると、ブラウザがページの上にスクロールしないようにするにはどうすればよいですか？

答えて

関連する問題