react----子组件进行给父组件传值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>子传父</title>
        <script src="../lib/react.production.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../lib/react-dom.production.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../lib/browser.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="out"></div>
    </body>
    <script type="text/babel">
        class App extends React.Component{
            constructor(props){
                super(props)
                this.state={
                    str:'',//再这接受子组件传过来的值
                }
            }
            
            render(){
                var _this=this;
                return(
                    <div>
                        <h1>子传父</h1>
                        <p>接收的值----{this.state.str}</p>
                        <hr/>
                        <Box name={function(msg){
                            _this.setState({str:msg})
                        }}/>
                        <p>setState来修改state里的值</p>
                    </div>
                )
            }
        }
        
        class Box extends React.Component{
            constructor(props){
                super(props)
                this.state={
                    
                }
            }
            tap(){
                this.props.name(this.refs.ipt.value);
            }
            render(){
                return(
                    <div>
                        <input type="text" ref="ipt" />
                        <p>根据ref类配合refs来获取输入框的值然后进行点击传值</p>
                        <button onClick={this.tap.bind(this)}>传值</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<App />,document.getElementById('out'))
    </script>
</html>
react----子组件进行给父组件传值。

猜你喜欢
