React中子组件向父组件传值

╰+攻爆jí腚メ 2021-09-29 04:18 334阅读 0赞

举例

父组件:

var React = require('react');
    import {render} from 'react-dom';
    import {Router, Route, Link} from 'react-router';
    import '../style/index.css';
    import Headnav from './indexComponents/headnav.jsx';
    import Content from './indexComponents/content.jsx';
    import Footer from './indexComponents/footer.jsx';
    var Index = React.createClass({
    
        getInitialState: function () {
            return {};
        },
    
        handleGet: function(val){
            this.setState({test: val});
        },
    
        render: function () {
            return (
                <div className="main">
                    <Headnav />
                    <div>所传的值：{this.state.test}</div>
                    <Content handleValue={this.handleGet.bind(this)}/>
                    <Footer />
                </div>
    
            );
        }
    });
    
    module.exports = Index;

子组件

import React from 'react';
    import {render} from 'react-dom';
    import {Router, Route, Link} from 'react-router';
    var Content = React.createClass({
    
        getInitialState: function () {
            return {testVal: 'Hello Runoob!'};
        },
    
        handAttribute:function(){
            this.props.handleValue(this.state.testVal);
        },
        render: function () {
            return (
                <div className="content">
                    this is content
                    <input onChange={this.handAttribute}/>
                </div>
            );
        }
    });
    
    module.exports = Content;

关系图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzQyNzIw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzQyNzIw_size_16_color_FFFFFF_t_70]: /images/20210812/8fbb76c0c3a1473f9b8b11abb1640bc7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，334人围观）

还没有评论，来说两句吧...

相关阅读

相关 react 子组件向父组件传值

父组件： /\\ \ 父组件方法 \/ fatherFunction(value)\{ //将子组件中获取到的值，赋给state值

我就是我/ 2023年05月29日 06:28/ 0 赞/ 20 阅读

相关【前端】Vue中子组件向父组件传值

子组件通过$emit方法（用来触发事件）传递参数。子组件  <template>

谁践踏了优雅/ 2022年12月05日 13:55/ 0 赞/ 179 阅读

相关 Vue中子组件向父组件传递参数

> / > 父子组件传递数据 > 1）子组件向父组件传递数据：事件机制 > 子组件给父组件传递一个事件，并携带上数据 >

忘是亡心i/ 2022年11月10日 05:42/ 0 赞/ 223 阅读

相关 React中父组件向子组件传值

import React from 'react'; import ReactDOM from 'react-dom'; import './index

ゝ一世哀愁。/ 2022年10月30日 06:25/ 0 赞/ 221 阅读

相关 vue 组件：父组件向子组件传值，以及子组件向父组件传值

1.父组件向子组件传值 <!DOCTYPE html> <html> <head> <meta charset='

矫情吗；*/ 2022年03月28日 04:16/ 0 赞/ 409 阅读

相关 Vue.js 父组件向子组件传值和子组件向父组件传值

父组件向子组件传值 1. 组件实例定义方式，注意：一定要使用`props`属性来定义父组件传递过来的数据 <script> // 创建 Vue

た入场券/ 2022年03月16日 20:16/ 0 赞/ 398 阅读

相关 vue子组件向父组件传值

背景 vue实现数据交互之子组件向父组件传值，这里通过点击事件改变父组件的值方法子组件User.vue //点击hello users后改变父组件titl

傷城~/ 2021年12月12日 07:21/ 0 赞/ 448 阅读

相关 uniapp 子组件向父组件传值

使用组件可以减少代码的重复率，提高写代码的效率，改起来也方便。最近在使用uni-app做项目，一套代码多端实现，做些简单的项目还是可以的。废话少说，说说子组件向父组件传值。

ゝ一纸荒年。/ 2021年11月24日 01:08/ 0 赞/ 1246 阅读

相关 React中子组件向父组件传值

举例父组件: var React = require('react'); import {render} from 'react-dom'; im

╰+攻爆jí腚メ/ 2021年09月29日 04:18/ 0 赞/ 335 阅读

相关 Vue子组件向父组件传值

子组件 props: { props:['childdata'], // 定义在父组件中的变量 }, me

太过爱你忘了你带给我的痛/ 2021年09月15日 12:18/ 0 赞/ 557 阅读