react中父组件的操作触发的函数需要用到子组件内的数据作为参数

标题名很长,其实说白了就是——子组件传值给父组件,但我一开始觉得这两种情况是不一样的。

查了一下资料,这种情况有一个专用语“状态提升”。这是官方文档:https://doc.react-china.org/react/docs/lifting-state-up.html

基本思想就是在父组件中定义一个state(这里是value)和改变这个state的函数(这里是setValue),然后把这个函数(setValue)通过props传给子组件;

子组件直接通过props中传过来的函数来改变父组件中的value,最后父组件就可以直接用这个value。

class Child extends React.Component{

constructor() {

super();

this.state= {};

}

render(){

  return(

   <div onClick={()=>{this.props.setValue('aaa')}}></div>

  )

class Parent extends React.Component{

     constructor() {

            super();

            this.state= {value:''};

            this.setValue=this.setValue.bind(this);

     }

setValue(value) {

this.setState({

value

});

}

dosomething(){

console.log(this.state.value)

}

render(){

return(

<div>

<button onClick={()=>{this.dosomething()}}

 <Child setValue={this.setValue}

</div>

)

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 目前,react组件有三种写法,分别是es5的createClass写法,es6的class写法,以及statel...
    ZoomFunc阅读 5,811评论 0 1
  • 自己最近的项目是基于react的,于是读了一遍react的文档,做了一些记录(除了REFERENCE部分还没开始读...
    潘逸飞阅读 8,950评论 1 10
  • 最近看了一本关于学习方法论的书,强调了记笔记和坚持的重要性。这几天也刚好在学习React,所以我打算每天坚持一篇R...
    gaoer1938阅读 5,675评论 0 5
  • 本笔记基于React官方文档,当前React版本号为15.4.0。 1. 安装 1.1 尝试 开始之前可以先去co...
    Awey阅读 12,314评论 14 128
  • 夜幕降临,窗外夜色如墨,点点灯光闪烁,马路上晚归的人们正心急火燎地或开车或骑车或步行急匆匆往家赶。是啊!北方的冬天...
    苏门映雪阅读 4,073评论 2 3