2017-12-09 3 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의 확인 된 정보를 유지 관리하는 상태 변수를 사용해보십시오.

핸들러에서 onCheck 핸들러는 상태를 설정하여 원하는 것을 제외한 모든 상자의 체크 박스를 토글합니다.

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

당신은 자바 스크립트

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