react---父组件向子组件传值

最新推荐文章于 2023-03-14 20:51:59 发布

初来乍到到

最新推荐文章于 2023-03-14 20:51:59 发布

阅读量193

点赞数

分类专栏： React 文章标签： react 父传子

本文链接：https://blog.csdn.net/weixin_43868692/article/details/86502642

版权

React 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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"></script>
        <script src="../lib/browser.min.js"></script>
    </head>
    <body>
        <div id="out"></div>
    </body>
    <script type="text/babel">
        class App extends React.Component{
            constructor(props){
                super(props)
                this.state={
                    str:""
                }
            }
            tap(){
                this.setState({str:this.refs.ipt.value})
            }
            render(){
                return(
                    <div>
                            <h1>父传子</h1>
                            <input type="text"  ref="ipt"/>
                            <button onClick={this.tap.bind(this)}>传值</button>
                            <Box name={this.state.str}/>
                    </div>
                )
            }
        }
        
        class Box extends React.Component{
            constructor(props){
                super(props)
            }
            render(){
                return(
                <div>
                    <h1>子组件</h1>
                    <div>值--{this.props.name}</div>
                </div>
                )
            }
        }
        ReactDOM.render(<App />,document.getElementById('out'))
    </script>
</html>