자식으로부터 부모 액세스 상태에 응답하십시오.

Question

React에있는 부모 자식 내부 상태를 어떻게 표시 할 수 있습니까?

var Form = React.createClass({ 
    render: function() { 
     return (
     <form> 
      <h1>***CHILD STATE CHECKED***</h1> 
      {this.props.children} 
     </form> 
     ) 
    } 
}) 

var Checkbox = React.createClass({ 
    getInitialState: function() { 
     return { 
      checked: true 
     } 
    }, 

    toggle: function() { 
     this.setState({ 
      checked: !this.state.checked 
     }); 
    }, 

    render: function() { 
     return (
      <div onClick={this.toggle} aria-checked={this.state.checked} role="checkbox"></div> 
     ); 
    } 
}) 

ReactDOM.render(
    <Form> 
     <Checkbox /> 
    </Form>, 
    document.querySelector('#app') 
); 

상위 요소 내부 (특히 상위 구성 요소의이 태그 내부)에 하위 요소의 상태를 표시하는 가장 좋은 방법은 무엇입니까? "못생긴 속임수"없이는 가능합니까?
확인란을 선택하면 노드 또는 다른 구성 요소를 양식에 추가하고 싶습니다.

Answer 1

체크 박스에서 토글을 호출하지 마십시오. Form 클래스에서 CheckBox 클래스로 콜백을 전달합니다. 양식 클래스에서

:

return(
     <CheckBox onClick={this.onClick} /> 
) 

    onClick(){ 
     console.log('Checkbox clicked'); 
    } 

CheckBox 클래스에서 :

<div onClick={this.props.onClick} aria-checked={this.state.checked} role="checkbox"> 

하지 자식 클래스에서 부모 클래스의 상태를 관리 할 수 ​​있습니다.