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

最新推荐文章于 2024-07-27 22:00:00 发布

咩有猫腻.

最新推荐文章于 2024-07-27 22:00:00 发布

阅读量204

点赞数

分类专栏： reactjs 三-框架类

本文链接：https://blog.csdn.net/DcTbnk/article/details/107675691

版权

三-框架类同时被 2 个专栏收录

83 篇文章 0 订阅

订阅专栏

reactjs

31 篇文章 0 订阅

订阅专栏

react组件传参

父组件向子组件传参使用props属性进行

子组件向父组件传参使用方法调用

在这里插入图片描述

<title>子组件向父组件传参</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./libs/babel.min.js"></script>
    <script src="./libs/react.js"></script>
    <script src="./libs/react-dom.js"></script>
    <script type="text/babel">
      const { Component } = React;
      class Counter extends Component {
        constructor(props) {
          super(props);
          this.state = { count: 0 };
        }
        render() {
          return (
            <div>
              <button
                onClick={() => {
                  this.setState({ count: this.state.count + 1 }, function () {
                    this.props.changeF(this.state.count);
                  });
                }}
              >
                点一下:{this.state.count}
              </button>
            </div>
          );
        }
      }
      class App extends Component {
        constructor(props) {
          super(props);
          this.state = { fromChild: 0 };
          this.changeFromChild = this.changeFromChild.bind(this);
        }
        changeFromChild(c) {
          this.setState({
            fromChild: c,
          });
        }
        render() {
          return (
            <div>
              <h5>子组件传递的数据位:{this.state.fromChild}</h5>
              <br />
              <Counter changeF={this.changeFromChild} />
            </div>
          );
        }
      }
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
  </body>

咩有猫腻.

关注

0
点赞
踩
1

收藏

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

<title>子组件向父组件传参</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <script src="./libs/react.js"></script> <script src="./libs/react-d.
复制链接

扫一扫

专栏目录