16入力タイプを反応させる= HTML Aタグ

にネストされている場合、チェックボックスは、Iが反応からinput type=checkboxとHTML a -tagを用いた特有の問題が正しく表示されません。問題は、チェックボックスを直接クリックすると、aタグではなく、チェックボックスが正しく再レンダリングされず、状態が更新されたということです。16入力タイプを反応させる= HTML Aタグ

例：以下のコードでは、コンポーネントをレンダリングし、チェックボックスを直接クリックします。この場合、showMapはコンストラクタでtrueに設定されているのでfalseに設定されますが、チェックボックスはhtmlビューでチェックされます。ただし、aのタグをクリックして、チェックボックスに直接は表示されない場合は、状態showMapとビューの両方が正しく更新されます。

event.preventDefault();をtoggleCheckboxにコールしないようにすることができますが、それを行うと、aタグをクリックするとアプリがページの上部にスクロールします。

例：

https://codesandbox.io/s/w2x8vqq8xl

コード：

import React from "react"; 
import { render } from "react-dom"; 

const styles = { 
    fontFamily: "sans-serif", 
    textAlign: "center", 
    //marginTop: "1000px" 
}; 

class Menu extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     showMap: true 
    }; 
    } 

    toggleCheckbox = event => { 
    this.setState({ showMap: !this.state.showMap }); 
    event.preventDefault();  
    }; 

    render() { 
    return (
     <div> 
     <h1>{this.state.showMap ? "Show" : "hide"}</h1> 
     <a href="#" role="button" onClick={this.toggleCheckbox}> 
      <input 
      type="checkbox" 
      title="test" 
      name="showMap" 
      checked={this.state.showMap} 
      readOnly 
      /> 
      Show map 
     </a> 
     </div> 

    ); 
    } 
} 

const App =() => (
    <div style={styles}> 
     <Menu /> 
    </div> 
); 

render(<App />, document.getElementById("root"));

アップデート：リアクトで

問題を作成しました。

https://github.com/facebook/react/issues/11539

出典

2017-11-13 Ogglas

これは完全にreactjsバグのようです。それを報告する場合は、質問にリンクを入れてください。 – zerkms

@zerkms私はそれを疑った。作成された問題とリンクされた質問が更新されました。 – Ogglas

これは、ブラウザのネイティブ動作のように見える：

HTML：

<a href="#" role="button" id="anchor"> 
    <input id="input" type="checkbox" title="test" name="showMap" readonly /> Clicking this text toggles the checkbox 
</a> 

<hr /> 
<label><input id="prevent" type="checkbox" /> Prevent Default</label> 

<p>With prevent default on, clicking the checkbox does not toggle it. Only clicking the text</p>

CSS：

body { 
    font-size: 15px; 
    line-height: 1.5; 
    padding: 20px; 
}

JS：

var anchor = document.getElementById('anchor') 
var prevent = document.getElementById('prevent') 
var input = document.getElementById('input') 
var toggled = false 

anchor.addEventListener('click', function (event) { 
    if (prevent.checked) { 
    event.preventDefault() 
    } 

    toggled = !toggled 

    input.checked = toggled 
})

https://codepen.io/nhunzaker/pen/WXONQK

https://github.com/facebook/react/issues/11539#issuecomment-343914330

出典

2017-12-08 12:12:32 Ogglas