React 简单的组件传值

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;

  

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

时间: 2024-10-10 13:18:25

React 简单的组件传值的相关文章

React学习笔记(三) 组件传值

组件嵌套后,父组件怎么向子组件发送数据呢? 答案是: this.props <script type="text/babel"> var MyFirst = React.createClass({ getInitialState : function(){ return { myMessage: ['我是父组件data1','我是父组件data2','我是父组件data3',] } }, render : function(){ return ( <div> &

几款简单的 React Native UI 组件

本文推荐 11 个非常棒的 React Native 开源组件,希望能给移动应用开发者提供帮助. React Native 是近期 Facebook 基于 MIT 协议开源的原生移动应用开发框架,已经用于 Facebook 的生产环境.React Native 可以使用最近非常流行的 React.js 库来开发 iOS 和 Android 原生 APP. 1. iOS 表单处理控件 tcomb-form-native tcomb-form-native 是 React Native 强大的表单处

react基础总结篇1,定义组件实现父子组件传值

前端时间学习了vue,这几天开始入手react了. react项目搭建起来之后,我们一定会定义很多个组件.同样的也会涉及到父子组件的传值.今天来整理一下这个知识. 1,定义子组件步骤 1,引入react. import React,{Component} from 'react'; import './style.less'; 2,写组件并export default导出去用到了es6中的calss语法,提前说一下,this.props.content用来接收父组件中content的值,this

vue 和react中子组件分别如何向父组件传值

vue子组件和父组件双向传值: 子: Vue.component("childComponent",{ template:`<div><p @click='postData'>向父组件传值:点击我</p>{{result?'开':'关'}}</div>`, props:["result"], data(){ return{ message:'从子组件传过来的数据' } }, methods:{ postData(){

react组件传值

父组件向子组件传值 父组件通过属性进行传递,子组件通过props获取 //父组件class CommentList extends Component{ render(){ return( <div> <Comment comment={information}/> </div> ) }}//子组件class Comment extends Component{ render(){ return( <div> <span>{this.props.

react父子组件传值

react均是以组件构成,那父子组件传值就很重要了 父组件传值给子组件,不仅可以传值,传事件,还可以传实例 1.父组件传值给子组件 传值 父组件: import React from 'react'; import Children from './Children'; class Father extends React.Component { constructor(props) { super(props); this.state = { msg:'父组件的msg' }; } render

vue 简单实现父组件向子组件传值,简单来说就是子组件肆意妄为的调用父组件里后台返回的值

首先在于父子组件传值的方法很多,本人在这里只是简单描述一下一个组件里面引用了子组件,那么子组件如何才能获取父组件中后台返回的值呢? 首先调用组件相信大家都应该明白了(不明白的自己撸撸文档), <info-head :orderInfo="orderInfo" :changePrice="changePrice"></info-head> 上面的是父组件中引用的子组件,其中orderInfo为父组件中定义的接收后台返回的值需要向平常一样的去定义

React同级组件传值

     在React中同级组件本身是没有任何关联的,要想有联系只能通过共同的父组件传值,一个子组件将数据传递到父组件中,父组件接收值再传入另一个子组件中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https:/

深入理解React组件传值(组合和继承)

在文章之前,先把这句话读三遍 Props 和组合为你提供了清晰而安全地定制组件外观和行为的灵活方式.注意:组件可以接受任意 props,包括基本数据类型,React 元素以及函数. 来源于React中文文档,组合和继承的一句话 其实这句话之前看过很多遍,主要还是应用于数据获取上. 在完全理解这句话之前,在写子组件改变兄弟子组件的状态上,没有头绪,同事上午跟我讲解了,我自己再把代码重新写一遍就认识到了,我完全忽略了组件传函数的方法,解锁这个方法以后,再写代码如同打开了一扇大门. 下面来看例子: 以