react子组件向父组件传值

最新推荐文章于 2023-07-29 16:30:00 发布

dong.wang

最新推荐文章于 2023-07-29 16:30:00 发布

阅读量1w

点赞数 4

分类专栏： react

本文链接：https://blog.csdn.net/wangdong9395/article/details/109073578

版权

react 专栏收录该内容

33 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">
    class Father extends React.Component {
      handleGetMsg = (value) => {
        console.log(value)
        this.setState({
          test: value
        })
      }
      state = {
          
        }
      render() {
        return (
          <div>
            <p>从子组件中接收到得数据: {this.state.test}</p>
            <Child getMsg={this.handleGetMsg}/>
          </div>
        )
      }
    }

    class Child extends React.Component {
      state = {
        val: 'haha'
      }
      handleClick = () => {
        this.props.getMsg(this.state.val)
      }
      render() {
        return (
          <div>
            <button onClick={this.handleClick}>子组件</button>
          </div>
        )
      }
    }
    ReactDOM.render(<Father />, document.getElementById('root'))

  </script>
</body>

</html>

在父组件中定义一个函数，该函数用于处理传递过来得值（比如用于修改父组件中state得数据）
在子组件调用部分通过属性绑定得形式绑定该函数（在子组件中就可以通过this.props.属性名就可以拿到该函数）
在子组件中绑定触发传值得事件比如点击事件，在事件处理函数中通过this.props.属性名（）调用父组件中定义得方法
就可以在父组件中拿到传递过来得值进行使用

dong.wang

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
react子组件向父组件传值

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.staticfile.org/reac
复制链接

扫一扫

专栏目录