1:父传子 使用props接受
新建一个Child7.js 里面写入
在App中引入和调用 以及数据的传递
运行就可以看见结果
2在子传父 通过调用子元素的事件来修复父元素的内容
核心:谁的数据 数据的修改方式就谁里面定义 别人只能调用 需要处理的 如果把声明好的方法传过去
num是属于App的 那么num修改的方式也属性App 传的App的方法给子组件
去修改子组件Child7.js
调用子组件的方法 去更新父组件中内容
在子组件加入一个文本框让用户输入 点击按钮 父组件的内容更新
还是刚才的原则 该的谁 方法定义在谁里面
改写App.js中 代码如下
import Child7 from "./Child7";
export default class App extends Component {
constructor(props){
super(props);
this.state ={
num:10,
num1:0
}
}
changeNum=(n)=>{
this.setState({
num1:n
})
}
addNum=()=>{
this.setState({
num:this.state.num+1
})
}
render() {
return (
<div>
app中num的数据为{this.state.num}
child7中的num1为:{this.state.num1}
<Child7 num={this.state.num} add={this.addNum} change={this.changeNum}></Child7>
</div>
)
}
}
代码解释
在子组件中调用即可
也可以用ref直接进行子传父 效果如下
代码如下
也可以方法 属性的修改 通过自身定义的方法
在子组件中定义取值的方法
如果才能把这个方法给父元素使用??? 就传普通值传过去就可以了
注意:本文归作者所有,未经作者允许,不得转载