React 学习(六) ---- 父子组件之间的通信

时间:2022-04-30 02:42:07

  当有多个组件需要共享状态的时候,这就需要把状态放到这些组件共有的父组件中,相应地,这些组件就变成了子组件,从而涉及到父子组件之间的通信。父组件通过props 给子组件传递数据,子组件则是通过调用父组件传给它的函数给父组件传递数据。

  很简单的一个例子,我们在输入框中输入温度,输入框下面显示冷和热。这里就有两个组件,输入框和它下面的显示内容,且它们共享一个状态,就是温度。所以我们要把温度这个状态放到这两个组件的父组件中。这里就有三个组件,一个输入框TemperatureInput,  一个是显示内容TemperatureShow,  父组件TemperatureContainer. 由于 TemperatuerInput  和TemperatureShow 是无状态的,可以用函数式声明,接受父组件传来的props. TempeartureContainer 是有状态的,要用class 声明。

  TemperatureShow 组件非常简单,就是条件渲染。根据父组件传递过来的温度,渲染出不同的内容。

    // temperatureShow
      function TemperatureShow(props) {
        if(props.temperature >38) {
          return <p>天气热</p>
        }else if(props.temperature<=38 && props.temperature >=0){
          return <p>天气正合适</p>
        }else {
          return <p>天气冷</p>
        }
      }

  TemperatureInput 则包含一个input输入框,在react, 输入框主要通过 value和 onChange 事件进行控制,状态是自保持的。但是这里我们把状态放到父组件TempeartureContainer 中,输入框是无状态的,所以它的value值也只能从父组件中获取,onChange 事件也只把用户输入的值传递给父组件,这里就是父子之间相互通信。 这里先简单写一个它的表现,onChange 稍后再说。

 //temperatureInput
      function TemperatureInput(props) {
        return (
          <p>
            <label htmlFor="tempInput">请输入天气温度</label>
            <input type="text" name="tempInput" value={props.temperature} onChange={} />
          </p>
        )
      }

  还剩下TempeartureContainer 父组件,它是一个容器,把所有的组件包起来,当然,它还要定义状态temperature,传递给子组件。

class TemperatureContainer extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            temperature: ''
          };
        }

        render() {
          let temperature = this.state.temperature
          return (
            <div>
                <TemperatureInput temperature={temperature} />
                <TemperatureShow  temperature={parseFloat(temperature) } />
            </div>
          )
      }
    }

  现在通过ReactDOM.render 把TempeartureContainer 渲染到页面上。

ReactDOM.render(
        <TemperatureContainer />,
        document.getElementById('root')
);

  最后我们要处理一下input 输入框中的输入问题,当我们进行输入的时候,会触发onChange事件,这时要改变temperature 的值,但是input自身是无法做到的,因为temperature存在于 父组件中,只能在父组件中改变。父组件中也很容易做到,声明一个函数,调用setState 方法,在setState中我们把新值赋值给temperature, 但是这个新值,也就是用户输入的值,有点问题,它存在于子组件input 中, 其实也很好解决,函数可以进行传参,函数通过传参可以获得它想要的值。所以在父组件中声明函数,在子组件调用,子组件通过函数传参,把获得的新值传递给这个函数,那么父组件 也就获得了子组件的值,当然父组件中函数要有一个参数用于接收值。父组件中声明的函数,子组件怎么调用? 这更简单了,父组件可以通过props 传递给子组件。

  在父组件中声明一个函数,它要有一个参数,同时通过props 传递给子组件

class TemperatureContainer extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            temperature: ''
          };
          this.handleTemp = this.handleTemp.bind(this); // 不要忘记 this 绑定
        }
        // 父组件中的函数,接受一个参数
        handleTemp(temperature) {
            this.setState({
                temperature:temperature
            })
        }
        render() {
          let temperature = this.state.temperature
          return (
            <div>
                {/* 传递给子组件*/}
                <TemperatureInput temperature={temperature} onTemperateChange={this.handleTemp}/>
                <TemperatureShow  temperature={parseFloat(temperature) } />
            </div>
          )
      }
    }

  子组件调用父组个传递过来的参数,并进行传值

function TemperatureInput(props) {
        function handleTemp(e) {
            // 接受父组件传递过来的函数,调用并传值
            props.onTemperateChange(e.target.value)
        }
        return (
          <p>
            <label htmlFor="tempInput">请输入天气温度</label>
             {/* onChange 事件调用函数*/}
            <input type="text" name="tempInput" value={props.temperature} onChange={handleTemp}/>
          </p>
        )
      }

  这时父组件就可以接受到子组件中的数据,同时组件和组件之间可以共享状态。

 

React 学习(六) ---- 父子组件之间的通信的更多相关文章

  1. React兄弟、父子元素之间的通信

    React兄弟.父子元素之间的通信 React元素之间的通信主要由下面几种方式 1. Redux 2. EventEmitter 3. 通过props进行通信(需要有嵌套关系) 子元素到父元素 父子元 ...

  2. 【转】vue父子组件之间的通信

    vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...

  3. vue2&period;0 父子组件之间的通信问题

    概要: 父组件向子组件通信:props属性 子组件向父组件通信:$emit()触发事件,$on()监听事件 在 vue 1.0 中可以使用$dispatch 和 $broadcast来实现 向上派发事 ...

  4. vue父子组件之间的通信

    利用props在子组件接受父组件传过来的值1.父组件parentComp.vue <template> <childComp :fromParentToChild="fro ...

  5. vue非父子组件之间的通信

    https://www.cnblogs.com/chengduxiaoc/p/7099552.html   //vm.$emit( event, arg ) //触发当前实例上的事件 //vm.$on ...

  6. vue2&period;0中父子组件之间的通信总结

    父组件: 子组件: 接受父组件的信息: 向父组件发送事件: (其中slot是插槽,可以将父组件中的<p>123</p>插入进来,如果父组件没有插入的内容,则显示slot内部的内 ...

  7. TZ&lowbar;16&lowbar;Vue父子组件之间的通信

    1.父向子传递props,该如何传递 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  8. vue框架组件之父子组件之间的通信

    1.如图看解说: 你子标签要给我父标签传递信息,你总得有个触发机制告诉我这是怎么回事对吧  要不我怎么知道你要传数据给我呢!

  9. Vue 组件&amp&semi;组件之间的通信 父子组件的通信

    在Vue的组件内也可以定义组件,这种关系成为父子组件的关系: 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的关系就是: Vue ...

随机推荐

  1. try-catch中的finally块

    finally块定义在catch的最后,只能出现一次. 无论程序是否出错都会执行的快板!无条件执行

  2. Geo-Fence

    转自:http://blog.jobbole.com/86633/ 地理围栏(Geo-fencing)是LBS的一种应用,就是用一个虚拟的栅栏围出一个虚拟地理边界,当手机进入.离开某个特定地理区域,或 ...

  3. PHP几个几十个G大文件数据统计并且排序处理

    诸多大互联网公司的面试都会有这么个问题,有个4G的文件,如何用只有1G内存的机器去计算文件中出现次数最多的数字(假设1行是1个数组,例如QQ号 码).如果这个文件只有4B或者几十兆,那么最简单的办法就 ...

  4. android图片特效处理之模糊效果

    这篇将讲到图片特效处理的模糊效果.跟前面一样是对像素点进行处理,算法是通用的,但耗时会更长,至于为什么,看了下面的代码你就会明白. 算法: 一.简单算法:将像素点周围八个点包括自身一共九个点的RGB值 ...

  5. OC - 正则表达式 - RegexKitLite

    正则表达式使用步骤: 1. 创建正则表达式对象, 设置约束条件; NSString *pattern = @"\\d{1,3}"; NSRegularExpression *reg ...

  6. abp允许跨域代码&comma;时间转换为固定格式&comma;本地时间

     在Global的 Application_BeginRequest方法中: Thread.CurrentThread.CurrentCulture = new CultureInfo("z ...

  7. majingwei 利用xml导出word文件---换行

    xml不能识别<br>,需要将换行标记转换成<w:br/>

  8. sklearn-woe&sol;iv-乳腺癌分类器实战

    sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction.htm?courseId=1005269003&utm_campai ...

  9. class&lowbar;create&lpar;&rpar;&comma;device&lowbar;create自动创建设备文件结点【转】

    本文参考来自CSDN博客,转载请标明出处:http://blog.csdn.net/zhenwenxian/archive/2010/03/28/5424434.aspx 本文转自:http://ww ...

  10. glob 在webpack中的使用。

    glob 在webpack中对文件的路径处理非常之方便,比如当搭建多页面应用时就可以使用glob对页面需要打包文件的路径进行很好的处理. 官方文档地址 : https://www.npmjs.com/ ...