码迷,mamicode.com
首页 > 其他好文 > 详细

React 简单的组件传值

时间:2019-12-19 19:16:43      阅读:87      评论:0      收藏:0      [点我收藏+]

标签:class   访问   scale   put   init   name   inpu   javascrip   icon   

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app"/>
    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

 子组件App.js

// 引入react
import React from ‘react‘;

// 声明class类
class App extends React.Component {
  //构造方法
  constructor(){
      super();
      this.state = {
          inputValue:‘‘
      }
  }
  //按钮点击事件
  handleClick(){
      //通过props属性获取父组件的getdata方法,并将this.state值传递过去
      this.props.getdata(this.state.inputValue);
  }
  //输入框事件,用于为this.state赋值
  handleChange(e){
     this.setState({
          inputValue: e.target.value
      });
  }
// 渲染
  render(){
      return (
          <React.Fragment>
              {/* 设置组件事件的方法,
                  方法名为组件中调用的方法名,
                  设置绑定this指向调用者
                */}
              <input onChange={this.handleChange.bind(this)}></input>
              <button onClick={this.handleClick.bind(this)}>点击获取数据</button>
          </React.Fragment>
      );
  }

}

// 向外抛出
export default App;

  

子组件Son.js

// 引入react
import React from ‘react‘;

// 声明class类
class Son extends React.Component {
    //构造方法
    constructor(){
        super();
        this.state = {
           
        }
    }
    // 渲染
    render(){
        return (
            <React.Fragment>
               <div>获取父组件的数据:{this.props.mess}</div>
            </React.Fragment>
        );
    }
  
  }
  
  // 向外抛出
  export default Son;

  父组件Person.js

// 引入react
import React from ‘react‘;
// 引入子组件
import App from ‘./App‘;

import Son from ‘./Son‘;

// 声明class类
class Person extends React.Component{

     //构造方法
     constructor(){
        super();
        this.state = {
            mess: ‘‘ //初始化mess属性
        }
    }
    //用于接收子组件的传值方法,参数为子组件传递过来的值
    getDatas(msg){
    //把子组件传递过来的值赋给this.state中的属性
        this.setState({
            mess: msg
        });
    }
    // 渲染
    render(){
        return (
            <React.Fragment>
                {/* 渲染子组件,设置子组件访问的方法,
                getdata属性名为子组件中调用的父组件方法名 */}
                <App getdata={this.getDatas.bind(this)}></App>
                <div>展示数据:{this.state.mess}</div>
                <Son {...this.state}></Son>
            </React.Fragment>
        );
    }

}
// 向外抛出
export default Person;

  

React 简单的组件传值

标签:class   访问   scale   put   init   name   inpu   javascrip   icon   

原文地址:https://www.cnblogs.com/yangjinggui/p/12069446.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!