父组件向子组件传值（通过props传值）

子组件:

class Children extends Component{constructor(props){super(props);}render(){return(<div>这是：{this.props.name}</div> // 这是 父向子)}
}

父组件:

class App extends React.Component{render(){return(<div><Children name="父向子"/></div>)}
}

父组件向子组件传值（回调函数）

子组件:

class Children extends Component{constructor(props){super(props);}handerClick(){this.props.changeColor('skyblue') // 执行父组件的changeColor 并传参 必须和父组件中的函数一模一样}render(){return(<div><div>父组件的背景色{this.props.bgcolor}</div> // 子组件接收父组件传过来的值 bgcolor<button onClick={(e)=>{this.handerClick(e)}}>改变父组件背景</button> // 子组件执行函数</div>)}
}

父组件:

class Father extends Component{constructor(props){super(props)this.state = {bgcolor:'pink'}}bgChange(color){this.setState({bgcolor:color})}render(props){<div style={{background:this.state.bgcolor}}>// 给子组件传递的值 color <Children bgcolor={this.state.bgcolor} changeColor={(color)=>{this.bgChange(color)}} /> // changeColor 子组件的参数=color 当做形参</div>}
}

子组件向父组件传值

子组件:
handleVal函数处理用户输入的字符，再传给父组件的handelEmail函数

var Child = React.createClass({handleVal: function() {var val = this.refs.emailDom.value;val = val.replace(/[^0-9|a-z|\@|\.]/ig,"");this.props.handleEmail(val);},render: function(){return (<div>请输入邮箱：<input ref="emailDom" onChange={this.handleVal}/></div>)}
});

父组件:
通过handleEmail接受到的参数，即子组件的值

var Parent = React.createClass({getInitialState: function(){return {email: ''}},handleEmail: function(val){this.setState({email: val});},render: function(){return (<div><div>用户邮箱：{this.state.email}</div><Child name="email" handleEmail={this.handleEmail.bind(this)}/></div>)}
});
React.render(<Parent />,document.getElementById('test')
);

原文章:

react中父组件和子组件之间的传值
react 中父传子，子传父，以及兄弟组件传参问题
React中—“props” 及父组件如何向子组件传值(组件通信-父传子)

React组件通信(父传子,子传父) - 前端相关推荐

React组件通信--props
React组件通信 1.props接收数据 //index.js import App from "./App";ReactDOM.render(<App name='传递数 ...
React组件通信传值父传子子传父兄弟组件传值
一.父组件传递子组件在父组件中引入子组件,将父组件的state值放到子组件标签中传递,在子组件中用this.props.传值名称,接收父组件代码: import React, { Componen ...
React组件通信-非父子组件间的通信
文章目录 React非父子组件通信小知识点的补充 Context应用场景 Context相关API Context使用流程 React非父子组件通信在React中, 非父子组件传递是通过一个API ...
react组件通信-逆战1913
父组件向子组件通信父组件: import React,{ Component } from "react"; import Childre from"./Childre ...
React组件通信技巧
效果图 communication.gif 点击查看Github完整源码 1.父向子通信直接标签中插入参数即可 //number只是个例子 let _number = this.state.numb ...
Vue.js 父子组件通信的十种方式；告诉世界前端也能做 AI；你可能不知道的14个JavaScript调试技巧...
记得点击文章末尾的"阅读原文"查看哟~ 下面先一起看下本周的摘要吧~ 想了解老用户如何参与阿里云双十一1折拼团特惠主机的,可以看第二条推送,文中提供了两种方法~,一起看看本周有哪些 ...
Vue组件通信09-多层级组件通信（爷爷到孙子-传方法）-$listener
components/Parent.vue <template><div>我是父组件<br>这里显示父级的msg:{{msg}}<Son :msg=" ...
vue3组件通信的方式父传子 props 和子传父 $emit 非父子组件的通信Provide和Inject 全局事件总线mitt库
vue3组件通信的方式一.父传子 props 和子传父 $emit 1.父传子 props 在开发中最常见的就是父子组件之间通信,父组件往子组件通信使用的是props.子组件往父组件通信则使用的是 ...
vue组件通信：父与子、子与父
父与子.子与父通信 1. 组件通信 1.1 组件嵌套 1.2 组件嵌套步骤 1.3 父与子.子与父通信 1.4 实现案例图示 2. 父组件与子组件通信 2.1 父与子通信 2.2代码实现父与子及详细说 ...

React组件通信(父传子,子传父) - 前端

父组件向子组件传值（通过props传值）

父组件向子组件传值（回调函数）

子组件向父组件传值

React组件通信(父传子,子传父) - 前端相关推荐

最新文章

热门文章