구성 요소의 하위 구성 변경 onClick

Question

반응이 있지만 새로운 것을 얻으려고 시도하지만 어떻게 작동시키는 지 모릅니다.

import React from "react"; 
import CheckBox from "./CheckBox"; 

class MainContainer extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {}; 
    this.onSelect= this.onSelect.bind(this); 
    }; 
    onSelect(selected) { 
    //change props only for the clicked checkbox and update state 
    } 
    render(){ 
    return (<div> 
       <CheckBox 
       label="Label" 
       count="60" 
       stateGroup="department" 
       ticked={false} 
       onClick = {this.onSelect} 
       /> 
       <CheckBox 
       label="Label" 
       count="60" 
       stateGroup="language" 
       ticked={false} 
       onClick = {this.onSelect} 
       /> 
      </div>) 
    } 

} 

그래서, 내가 내 "확인란"구성 요소와 컨테이너 "MainContainer"을 가지고 있고 한 곳은 "MainContainer"상태에 내 상태를 유지하려면 : 여기 내 코드입니다. 내가 뭘 하려는지 onSelect 선택 상태를 업데이 트뿐만 아니라 선택한 구성 요소에 대한 소품을 변경하지만, 어떻게 그 구성 요소에 onSelect 함수를 액세스 할 수 있는지 모르겠다. 내가 처음에 구성 요소에 대한 소품을 직접 바꿀 수 없다면 말입니다.

감사합니다.

Answer 1

귀하의 진술은 각 확인란의 매핑을 상태로 저장하지 않고도 선택할 수 있기를 원합니다. 당신이 할 수있는 일은 당신이 여러개의 체크 박스를 선택할 수 있고 상태 어레이에 선택된 아이템들의 배열을 유지할 수 있기를 원할 때입니다.

class MainContainer extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { selectedValues: []}; 
    this.onSelect= this.onSelect.bind(this); 
    }; 
    onSelect(selected, checked) { 
    //change props only for the clicked checkbox and update state 
    if(checked) { 
     //if the checkbox is check append id to the selected state array 
     this.setState((prevState) => ({ 
       selectedValues: prevState.selectedValues.concat(selected); 
     })) 
    } else { 
     //remove the value from state is its unchecked 
     let selectedValues = [...this.state.selectedValues]; 
     const index = selectedValues.indexOf(selected); 
     if(index > -1) { 
      selectedValues = [...selectedValues.slice(0, index), ...selectedValues.slice(index + 1)]; 
     } 
     this.setState({selectedValues}); 
    } 
    } 
    render(){ 
    return (<div> 
       <CheckBox 
       label="Label" 
       count="60" 
       stateGroup="department" 
       ticked={this.state.selectedValues.indexOf("department") > -1} 
       onClick = {this.onSelect} 
       /> 
       <CheckBox 
       label="Label" 
       count="60" 
       stateGroup="language" 
       ticked={this.state.selectedValues.indexOf("language") > -1} 
       onClick = {this.onSelect} 
       /> 
      </div>) 
    } 

} 

하고 경우에 당신은 한 번에 선택할 수 하나 Checkbox를 원하는 경우 다음

this.props.onClick(this.props.stateGroup, checkedState); 

같은 아이에서 onSelect를 함수를 호출 할 수 있습니다, 당신은 오히려 대신 Radio의 사용을해야합니다. 그러나 당신의 작업은 단지 selectedValue을 배열 대신에 문자열로 저장할 필요가 있기 때문에 더 간단합니다.

Answer 2

먼저 초기 상태를 설정 한 다음 버튼 클릭시 상태를 변경해야합니다.

import React from "react"; 
import CheckBox from "./CheckBox"; 

class MainContainer extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = { 
    checked: false, 
    }; 
    this.onSelect= this.onSelect.bind(this); 
}; 

onSelect(selected) { 
    this.setState({checked: selected}) // or maybe: selected.target.value 
} 

render(){ 
    return (
     <div> 
      <CheckBox 
      label="Label" 
      count="60" 
      stateGroup="department" 
      ticked={false} 
      onClick = {this.onSelect} 
      /> 
      <CheckBox 
      label="Label" 
      count="60" 
      stateGroup="language" 
      ticked={false} 
      onClick = {this.onSelect} 
      /> 
     </div>) 
} 

}