ReactJS MaterialUI onCheck() 내의 Checkboxes 설정 상태

Question

material-ui 0.15.3 및 react 15.3.0을 사용합니다.

Checkbox 구성 요소가 있는데 this.setState을 onCheck 기능 내에 사용하고 싶습니다.

내가 수동으로 체크 박스의 checked 소품에 뭔가를 전달해야한다는 것이 꽤 빨리 드러났습니다. 그렇지 않으면 setState를 사용할 수 없습니다. 그렇게하려고하면 확인란의 시각적 구성 요소가 업데이트되지 않습니다. 예 : 확인란을 클릭하면 빈 상태로 유지됩니다. 첫 번째 질문은 왜입니까? 왜 이것을 통제되지 않은 구성 요소로 유지할 수 없습니까? checked 소품에 뭔가를 전달해야하는 이유는 무엇입니까?

<Checkbox 
    label="1" 
    style={styles.checkbox} 
    onCheck={this.handleCheck.bind(this)} 
    checked={this.state.box1} // if this is not supplied then I cannot use setState within handleCheck() 

handleCheck() :

handleCheck(event, checked) { 
    this.setState({ 
     box1: checked 
     someState: someValue 
    }); 
} 

가 지금은 여러 체크 박스, 그래서 내 두 번째 질문은, 어떻게이을 구성 할 수있다있다 그래서 가능한 한 깨끗한? 개별 handleCheck() 함수가있는 각 확인란마다 별도의 상태 변수가 있어야합니까? 매우 지저분해질 것 같은 느낌입니다. 예 : (상자 1, 상자 2, 상자 3에 대한 상태)

Answer 1

각 확인란마다 별도의 상태 변수가 있어야합니까?

예, 그렇지만 부담스럽지는 않습니다. 특정 체크 박스에 해당하는 ID의 배열 일 수 있습니다.

별도의 handleCheck() 함수가 필요합니까?

확실히 하나의 기능 만 수행합니다. 이드를 따라 가라.

handleCheck(id) { 
    let found = this.state.activeCheckboxes.includes(id) 
    if (found) { 
    this.setState({ 
     activeCheckboxes: this.state.activeCheckboxes.filter(x => x !== id) 
    }) 
    } else { 
    this.setState({ 
     activeCheckboxes: [ ...this.state.activeCheckboxes, id ] 
    }) 
    } 
} 

render() { 
    return (
    <div> 
     {this.state.aBunchOfCheckboxes.map(checkbox => 
     <Checkbox 
      label={checkbox.label} 
      onCheck={() => this.handleCheck(checkbox.id)} 
      checked={this.state.activeCheckboxes.includes(id)} 
     /> 
     } 
    </div> 
) 
} 

Answer 2

내 첫 번째 질문은 왜 :

다음은 체크 박스의 변수 번호가 상상하는 예입니까? 왜 이것을 통제되지 않은 구성 요소로 유지할 수 없습니까? 왜 체크 된 받침에 뭔가를 전달해야합니까?

체크 박스가 선택되어 있는지 여부를 결정하려면 체크 박스에 checked 속성이 필요합니다. checked이 true을 받으면 체크 박스는 체크 된 것으로 표시되고 false을 받으면 체크되지 않은 상태로 유지됩니다. 값을 전달하지 않으면 체크 된 체크 박스 또는 체크되지 않은 체크 박스를 표시할지 여부를 어떻게 알 수 있습니까?