study
/
react
/
49th.html

<!DOCTYPE html>
<html>
<head>
	<title>react-component-子父组件传值</title>
    <meta charset="UTF-8" />
	<script src='../node_modules/react/umd/react.development.js'></script>
	<script src='../node_modules/react-dom/umd/react-dom.development.js'></script>
    <script src='../node_modules/babel-standalone/babel.min.js'></script>

</head>
<body>
    <div id="my"></div>
    <script type="text/babel">
    class ParentList extends React.Component{
        constructor(){
            super();
            this.state = {
                checked:false
            };
        };
        childChange(data){
            this.setState({
                checked:data
            })
        };
        render(){
            var isChecked = this.state.checked?'yes':'no';
            return (
                <div>
                    <div>父组件：{isChecked}</div>
                     <ChildList checked={this.state.checked} handle={(e)=>this.childChange(e)}/>
                </div>
                )
        }
    };
    class ChildList extends React.Component{
        constructor(props){
            super();
            this.state = {
                checked:props.checked
            };
        };
        change(){
            var data = !this.state.checked
            this.setState({
                checked:data
            });
            this.props.handle(data);
            /*调用父的方法*/
        }
        render(){
            return (
                <div>子组件：
                   <input type="checkbox"
                        checked={this.state.checked}
                        onChange={(e)=>{this.change(e)}} />
                </div>
                )
        }
    };
     ReactDOM.render(
          <ParentList/>,
        document.getElementById('my')
    )
    </script>
</body>
</html>