React父子组件之间的通信
React中:
1.父传子 --> 传递数据,属性
2.子传父 --> 传递方法,回调函数的调用
3.ref标记,父组件拿到子组件的引用,就可以调用子组件的方法
Vue中:
1.父传子 --> 属性
2.子传父 ---> 事件
ref与父传子、子传父的区别
输入框的value值拿到之后,还要把value值通过回调函数调用传回给外面的事件(父组件),如果父组件想要清空输入框的话,就从父组件中传一个新的
属性进来,进行重置,这样就不用与input标签进行交互,只要身上绑定一个ref,我就能拿到这个组件的任何东西,我能拿到他的状态,我就可以获取它里面
孩子的状态,同样的话,我还可以去修改他的状态。
1.React-父传子
import React, { Component } from 'react'
class Navbar extends Component{
render(){
return <div>
<button>返回</button>
{/* vue中的props功能一样 */}
{ this.props.mytitle }
{ this.props.myshow ? <button>首页</button> : null }
</div>
}
}
export default class App extends Component {
render() {
return (
<div>
{/* myshow传的是Boolean值 */}
<Navbar mytitle="首页" myshow={false}></Navbar>
<Navbar mytitle="列表" myshow={true}></Navbar>
<Navbar mytitle="购物车" myshow={true}></Navbar>
</div>
)
}
}
2.React-子传父
import React, { Component } from 'react'
class Navbar extends Component{
render(){
return <div style={{background:"red"}}>
{/* 3.拿到handleClick这个事件 */}
navbar<button onClick={this.handleClick}>点击</button>
</div>
}
// 2.触发onKerwinEvent事件
handleClick = ()=>{ this.props.onKerwinEvent() }
// 4.子组件中访问到isShow这个属性,()执行onKerwinEvent这个回调函数函数,这个回调函数封装在APP组件中
}
class Sidebar extends Component{
render(){
return <div style={{background:"yellow"}}>
Sidebar
<ul>
<li>11111</li>
<li>222222</li>
<li>33333</li>
</ul>
</div>
}
}
export default class App extends Component {
state = {
isShow:true
}
render() {
return (
<div>
{/* 1.监听自定义事件 */}
<Navbar onKerwinEvent={()=>{ // App 组件的回调函数
{/* 5.调用setState方法,修改状态 */}
this.setState({
isShow: !this.state.isShow
})
}}/>
{ this.state.isShow ? <Sidebar/> : null }
{/* 相当于:
<button onClick={()=>{
this.setState({
isShow:!this.state.isShow
})
}}>click</button> */}
</div>
)
}
}
3.React-ref通信
// todolist
import React, { Component } from 'react'
class Input extends Component{
// 5.定义状态
state = {
mytext:"",
list: ['111', '222', '333']
}
// 10.定义kerwinreset方法,用来清空输入框的value值
kerwinreset= ()=>{
this.setState({
list: [...this.state.list, this.state.mytext],
mytext:""
})
}
handleDel = (index) => {
var newList = [...this.state.list]
newList.splice(index, 1)
console.log(newList)
this.setState({
list: newList
})
}
render(){
return (
<div>
{/* 1.创建组件 */}
{/* 7.绑定onChange事件 */}
<input type="text" style={{background:"yellow"}}
value={this.state.mytext} onChange={(e)=>{
this.setState({
// 8.一点击button按钮就把输入框当前的value同步给mytext状态
mytext:e.target.value
})
}}/>
<ul style={{ listStyle: "none" }}>
{ this.state.list.map((item, index) =>
<li key={item}>
{ item }
<button onClick= { this.handleDel.bind(this, index) }>删除</button>
</li>
) }
</ul>
</div>
)
}
}
export default class App extends Component {
state = {
datalist: []
}
render() {
return (
<div>
{/* 2.使用组件,通过ref拿到value值 */}
<Input ref="myinput"/>
{/* 3.绑定点击事件 */}
<button onClick={this.handleClick}>添加</button>
</div>
)
}
// 4.点击事件
handleClick = ()=>{
// 6.拿到input的结构(状态和方法都能拿到)
console.log(this.refs.myinput)
// 9.拿到拿到输入框的value值
console.log(this.refs.myinput.state.mytext)
// 11.拿到输入框的value之后,调用kerwinreset方法,来清空输入框
this.refs.myinput.kerwinreset()
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/4573.html