react的组件通信
2024-10-20 11:34:00
react的组件通信
1、父组件传子组件
import React, {Component} from 'react'
class Father extends Component{
render() {
return (
<div>
<Child msg="我是父组件中的数据：father-data"/>
</div>
)
}
}
class Child extends Component{
constructor(props) {
super(props)
this.state = {
message: props.msg
}
}
render() {
return (
<div>
<div>父组件传过来的数据是：{this.state.message}</div>
</div>
)
}
}
export default Father父组件在调用的子组件上定义一个属性msg，属性的值就是需要传递的数据。在子组件中，通过props.msg获取数据。
2、子组件传父组件
import React, { Component } from 'react'
class Child extends Component {
constructor(props) {
super(props)
}
input = (e) => {
console.log(e.target.value);
if (e.keyCode == 13) {
this.props.send(e.target.value)
}
}
render() {
return (
<div>
<input type="text" placeholder='please input' onKeyUp={this.input} />
</div>
)
}
}
class Father extends Component {
state = {
inputVal: "123"
}
getData = (val) => {
this.setState({
inputVal: val
})
}
render() {
return (
<div>
<Child send={this.getData} />
子元素传过来的值：{this.state.inputVal}
</div>
)
}
}
export default Father子组件传父组件是通过在子组件中使用props调用父组件中定义的方法（函数）并将自己的数据传递过去。
如上所示，父组件在调用的子组件上定义了send方法用于获取子组件传过来的数据，子组件中调用父组件中的send方法将input的值传过去。
注意：若定义的函数不是箭头函数，则需要在调用的地方使用bind绑定当前this。如this.getdata.bind(this)
3、兄弟组件通信
import React, {Component} from 'react'
class A extends Component{
state = {
inputVal: "module A default value"
}
handleChange = (e) => {
this.setState ({
inputVal: e.target.value
})
}
sendData = () = {
const { sendFn } = this.props
sendFn(this.state.inputVal)
}
render() {
return (
<div>
<input type="text" value={this.state.inputVal} onChange={this.handleChange}/>
<button onClick={this.sendData}>send</button>
</div>
)
}
}
class B extends Component{
const { sendVal } = this.props
render() {
return (
<div>
<p>B组件接收到的值是：{sendVal}</p>
</div>
)
}
}
class Public extends Component{
state = {
inputVal: "module Public default value"
}
handleUpdate= (inputVal) => {
this.setState({
inputVal: inputVal
})
}
render() {
return (
<div>
<A sendFn={this.handleUpdate}></A>
<B sendValue={this.state.inputVal}></B>
</div>
)
}
}
export default Public兄弟组件传值（A传B）需要使用公共组件（Public）进行过渡，即A传Public、Public传B。
A组件通过监听input框输入的值，然后点击按钮，在按钮事件中会调用公共组件中的更新视图（handleUpdate）的方法，将文本框的值作为参数传进去，然后公共组件就获取到A组件的值，然后将公共组件的值传给B组件，B组件再去就接收就能获取到公共组件的值，这样，也就获取到A组件传过来的值。
最新文章
- sql编程（四）触发器
- redis配置文件英译汉
- PHP+Zend 输出时中文乱码问题
- 深入理解openstack网络架构(4)-----连接到public network
- simple demo how to get the list of online users
- ios9关闭系统自动更新
- JAVA GUI设计中遇到的一个小问题
- 基于K2 BPM平台，中原地产实现了从2个人到5万多人的跨越
- A problem is easy
- iOS下日期的处理(世界标准时转本地时间)
- Codeforces 460 DE 两道题
- 移动互联与O2O的完美衔接
- java计算器
- css伪类伪元素
- [Cocos2d-x]节点的生命周期
- 利用squid 搭建简单的透明代理服务器
- 如何查看与更改python的工作目录？
- 设置firefox每次访问网页时检查所存网页的较新版本
- 3.4 unittest之装饰器（@classmethod）
- 《JavaScript模式》一书中提到的一些坑