オブジェクトを取得して、材料チェックボックスのチェックボックスIDを取得します。

Question

チェックボックスのオブジェクトを取得し、そこからIDを抽出しようとしています。 私のマークアップコード：

<div style={{display: 'inline-block', }}><Checkbox id='q1' onclick={toggleField(this)}/></div> 
<div style={{display: 'inline-block', }}><Checkbox id='q2' onCheck={toggleField(this)}/></div> 

機能：

toggleField = (obj) => { 
    console.log("id : " + obj.id); 
    } 

Aaaannndこれは私にエラーを与えます。それはtoggleField is not definedと言います。 私はq1またはq2にチェックを入れようとしています。

ロジックをテストするために、基本的なhtmlとjsで同様のデモを用意しました。マークアップコード

<input id='c1' type='checkbox' onclick='handleClick(this);'>Check Me</label> 

JSコード

handleClick = (cb) => { 
    console.log("Clicked, new value = " + cb.id); 
} 

そして、それは私が取得しようとしていますしている私にc1を与えます。

jsxで同じ結果を得るにはどうすればよいですか？

Answer 1

JSXではonClickです。もちろん、次のようにコンストラクタにバインドを追加するといいでしょう：this.toggleField = this.toggleField.bind（this）

あなたはtoggleField（イベント）を取得し、イベントではevent.targetのようなターゲットを試しますそこからあなたのIDに到達する。

これが役に立ちます。