2017-12-09 50 views
0

最初に次のコードを参照してください。 特定のチェックボックス(ID:cfc1)をクリックするたびにチェックしないようにします。 私はここにonCheck関数を使用しています。私は特定の要素をクリックするたびにチェックが外されて表示されることはありません。私はコードを使用しようとしています -チェックボックスの問題oncheck機能

if(e.currentTarget.id === 'cfc1') { 
    document.getElementById(e.currentTarget.id).checked = false; 
} 

しかし、それは動作していません。

onCheck機能の使用方法は?

import React, {Component} from 'react'; 
import Checkbox from 'material-ui/Checkbox'; 

class Checkboxes extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     checkids:['cfc0', 'cfc1', 'cfc2', 'cfc3'] 
    }; 
    this.handleCheck = this.handleCheck.bind(this); 
    this.getElements = this.getElements.bind(this); 
    } 
    getElements() { 
    let arr = []; 
    this.state.checkids.forEach(function(element) { 
     arr.push(
      <Checkbox 
      id={element} 
      onCheck={this.handleCheck} 
      /> 
     ); 
    }, this) 
    return arr; 
    } 
    handleCheck(e) { 
    console.log(e.currentTarget.id); 
    console.log(e.currentTarget.checked); 
    } 
    render() { 
    return(
     <div> 
      {this.getElements()} 
     </div> 
    ); 
    } 
} 
export default Checkboxes 

答えて

1

あなたのユースケースでうまく動作するようにするには、各要素IDのチェックされた情報を維持する状態変数を使用してみてください。

ハンドラでは、状態を設定して必要なもの以外のすべてのボックスのチェックボックスをトグルします。

WORKING DEMO

class App extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     checkids:{ 
      'cfc0': false, 
      'cfc1': false, 
      'cfc2': false, 
      'cfc3': false 
     } 
    }; 
    } 

    handleCheck(e) { 
    const checkids = {...this.state.checkids}; 
    checkids[e.target.id] = e.target.id === "cfc1" ? false : !checkids[e.target.id]; 

    this.setState({checkids}); 
    } 

    getElements() { 
    let arr = []; 
    Object.keys(this.state.checkids).forEach(function(element, index) { 
     arr.push(
      <Checkbox 
      key={index} 
      id={element} 
      checked={this.state.checkids[element]} 
      onCheck={this.handleCheck.bind(this)} 
      /> 
     ); 
    }, this) 
    return arr; 
    } 

    render() { 
    return (
     <MuiThemeProvider> 
     <div> 
      {this.getElements()} 
     </div> 
     </MuiThemeProvider> 
    ); 
    } 
} 
+0

経由this.checked = falseを使用することができます申し訳ありませんが、私は少し私の質問を編集しました。 onCheck関数を使ってそれを行う方法は? – Subhojit

+0

私はこのコードをhandleCheck関数内で使用しようとしています。しかし、それは動作していません。 - if(e.currentTarget.id === 'cfc1'){document.getElementById(e.currentTarget.id).checked = false; } – Subhojit

+0

これは最初に実行したときにチェックされるため、動作しません。私はすぐにアップデートを追加しますが、 'onCheck'ハンドラでのみ行う必要があるユースケースは何ですか? –

0

あなたはjavascript

document.getElementById('cfc1').onclick = function() { 
 
    this.checked = false; 
 
}
<label><input type="checkbox" id="cfc1">Click</label>

+0

onCheck関数のイベントハンドラを使用してこれを行うことはできますか? – Subhojit

+0

私はこのコードをhandleCheck関数内で使用しようとしています。しかし、それは動作していません。 - if(e.currentTarget.id === 'cfc1'){ \t \t \t document.getElementById(e.currentTarget.id).checked = false; \t \t} – Subhojit