脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React 子组件向父组件传值

React 子组件向父组件传值的方法

 更新时间：2017年07月24日 08:26:41   作者：化风  
本篇文章主要介绍了React 子组件向父组件传值的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本文介绍了React 子组件向父组件传值的方法，分享给大家

子组件需要控制自己的 state， 然后告诉父组件自己的state，通过props调用父组件中用来控制state的函数，在父组件中展示子组件的state变化。

/***实现在输入框输入邮箱时，在div中即时显示输入内容***/


<body>
  <div id="test"></div>
</body>

//子组件
var Child = React.createClass({
  render: function(){
    return (
      <div>
        邮箱：<input onChange={this.props.handleEmail}/>
      </div>
    )
  }
});

//父组件
var Parent = React.createClass({
  getInitialState: function(){
    return {
      email: ''
    }
  },
  handleEmail: function(event){
    this.setState({email: event.target.value});
  },
  render: function(){
    return (
      <div>
        <div>邮箱：{this.state.email}</div>
        <Child name="email" handleEmail={this.handleEmail.bind(this)}/>
      </div>
    )
  }
});
React.render(
 <Parent />,
 document.getElementById('test')
);

原理：

依赖 props 来传递事件的引用，并通过回调的方式来实现的，这样实现不是特别好，但在没有任何工具的情况下是一种简单的实现方式。

分析：

React中当state发生改变时，组件才会update。在父组件中设定state的初始值以及处理该state的函数，同时将函数名通过以props属性值的形式传入子组件，子组件通过调用父组件的函数，进而引起state变化，达到在父组件中展示子组件产生的变化。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • react页面中存在多个input时巧妙设置value属性方式

    react页面中存在多个input时巧妙设置value属性方式

    这篇文章主要介绍了react页面中存在多个input时巧妙设置value属性方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05
  • React合成事件详解

    React合成事件详解

    这篇文章主要介绍了React合成事件的相关资料，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
    2021-05-05
  • React中的Hooks路由跳转问题

    React中的Hooks路由跳转问题

    这篇文章主要介绍了React中的Hooks路由跳转问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • 用react-redux实现react组件之间数据共享的方法

    用react-redux实现react组件之间数据共享的方法

    这篇文章主要介绍了用react-redux实现react组件之间数据共享的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • React拆分窗格组件的两种方法

    React拆分窗格组件的两种方法

    这篇文章主要介绍了React拆分窗格组件的两种方法,使用第三方库react-split-pane适用于快速实现拆分窗格功能，并且对功能和样式的要求较为简单的场景，本文结合示例代码介绍的非常详细，需要的朋友可以参考下
    2023-07-07
  • react18 hooks自定义移动端Popup弹窗组件RcPop

    react18 hooks自定义移动端Popup弹窗组件RcPop

    这篇文章主要介绍了react18 hooks自定义移动端Popup弹窗组件RcPop,react-popup 基于react18+hook自定义多功能弹框组件,整合了msg/alert/dialog/toast及android/ios弹窗效果,需要的朋友可以参考下
    2023-08-08
  • 如何在 React 中使用 substring() 方法

    如何在 React 中使用 substring() 方法

    这篇文章主要介绍了在 React 中使用 substring() 方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • 深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践

    深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践

    这篇文章主要介绍了深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践，TypeScript 增加了代码的可读性和可维护性，拥有活跃的社区，,需要的朋友可以参考下
    2019-06-06
  • React中实现父组件调用子组件的三种方法

    React中实现父组件调用子组件的三种方法

    在React中,组件之间的通信是一个常见的需求,有时,我们需要从父组件调用子组件的方法,这可以通过几种不同的方式实现,需要的朋友可以参考下
    2024-04-04
  • react 应用多入口配置及实践总结

    react 应用多入口配置及实践总结

    这篇文章主要介绍了react 应用多入口配置及实践总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10

最新评论