ReactのクリックイベントはonclickではなくonClick
Reactコンポーネントを定義する際は、onclickでは動作しません。
onClick（Cが大文字）を使用します。※Reactではイベントはキャメルケースになります onClick,onCahnge…
<div id="koko"></div>
<script type="text/babel">
class Test extends React.Component {
constructor (props) {
super(props);
}
render() {
const handler = (e) => {
alert('Click');
}
return (
<div onClick={handler}>押してください</div>
)
}
}
ReactDOM.render(
<Test />,
document.getElementById("koko")
)
</script>
{handler}を{this.handler}とするとクリックイベントが動作しないので注意です。
classのメソッドとして定義する場合はbindする
render()メソッド内で記述せずにclassのメソッドとして記述する場合はコンストラクタ内でbindする必要があります。
以下では、this.aに代入しています。
<script type="text/babel">
class Test extends React.Component {
constructor (props) {
super(props);
this.a = this.handler.bind(this);
}
// クラスのメソッド
handler() {
alert('Click');
}
render() {
return (
<div onClick={this.a}>click me</div>
)
}
}
ReactDOM.render(
<Test />,
document.getElementById("koko")
)
</script>
アロー関数を使用することによりbindを省略する
コンストラクタでbindするのを省略したいです。
アロー関数はthisを束縛するので、アロー関数を使用することによってコンストラクタを省略することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Reactサンプル</title>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
</head>
<body>
<div id="koko"></div>
<script type="text/babel">
class Test extends React.Component {
// クラスのメソッド
handler() {
alert('Click');
}
render() {
return (
<div onClick={()=>{this.handler()}}>click me</div>
)
}
}
ReactDOM.render(
<Test />,
document.getElementById("koko")
)
</script>
</body>
</html>
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES20xx),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント