react 中父组件与子组件双向绑定问题
在项目中我们可能会遇到类似这样的场景，也就是父子组件的双向数据绑定
首先，先把在head中引入react.js、react-dom.js和可选择的babel.js(这里需要注意引用的顺序，react.js必须在react-dom.js之前)
<head> <script src="react.js"></script> <script src="react-dom.js"></script> <script src="babel.js"></script> </head>
在body里新建一个挂载点
<body> <div id='app'></div> </body>
然后就可以开始写JSX了，注意script标签需注明type类型为"text/babel"或"text/jsx"
<script tpye='text/babel'>
//父组件
class Father extends React.Component {
constructor(props) {
super(props)
this.state = {
fname: '父组件',
fage: 18,
key: ''
};
}
setFname(event) {
this.setState({fname: event.target.value, key: event.target.value}); //设置fname值为input的value值；key用来监听值是否变化
} setFage(event) { this.setState({fage: event.target.value, key: event.target.value}) } toData(data) { this.setState({fname: data.name}); this.setState({fage: data.age}); } render() { return ( <div> <table border="1" cellSpacing="0"> <tbody> <tr> <th colSpan="3">父组件数据</th> </tr> <tr> <td>name</td> <td>{this.state.nameFvalue}</td> <td><input value={this.state.fname} onChange={this.setFname.bind(this)}/></td> //受控组件当input值改变时触发方法setFname </tr> <tr> <td>age</td> <td>{this.state.ageFvalue}</td> <td><input value={this.state.fage} onChange={this.setFage.bind(this)}/></td> </tr> </tbody> </table><br> <br> //子组件标签里将父组件的数据传递给子组件，在子组件里利用props接收；key值变化时，子组件数据更新
<Son key={this.state.key} fname={this.state.fname} fage={this.state.fage} toData={this.toData.bind(this)}></Son>
</div>
)
}
}<br><br><br> //子组件<br><br>
class Son extends React.Component {
constructor(props) {
super(props)
this.state = {
sVname: this.props.fname, //将父组件传下来的值赋给sVname
sVage: this.props.fage
}
}
sVname(ev) {
console.log(ev.target)
this.setState({
sVname: ev.target.value
})
}
sVage(ev) {
this.setState({
sVage: ev.target.value
})
}
toData(data) {
// console.log(svname)
this.props.toData(data)
}
render() {
return (
<div>
<button onClick={this.toData.bind(this, {name: this.state.sVname, age: this.state.sVage})}>点我传值
</button>
<table border="1" cellSpacing="0">
<tbody>
<tr>
<th colSpan="3">子组件数据</th>
</tr>
<tr>
<td>name</td>
<td>{this.state.sVname}</td>
<td><input value={this.state.sVname} onChange={this.sVname.bind(this)}/></td>
</tr>
<tr>
<td>age</td>
<td>{this.state.sVage}</td>
<td><input value={this.state.sVage} onChange={this.sVage.bind(this)}/></td>
</tr>
</tbody>
</table>
</div>
)
}
}
</script>
总结
以上所述是小编给大家介绍的react 中父组件与子组件双向绑定问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关推荐
-
浅谈vue,angular,react数据双向绑定原理分析
传统做法 前端维护状态,手动操作DOM更新视图.前端框架对服务器数据通过模版进行渲染.当用户产生了一个动作之后,我们通过document.getElementBy... 手动进行DOM更新. 框架帮忙分离数据和视图,后续状态更新需要手动操作DOM,因为框架只管首次渲染,不追踪状态监听变化. 双向数据绑定 当我们在前端开发中采用MV*的模式时,M - model,指的是模型,也就是数据,V - view,指的是视图,也就是页面展现的部分.通常,我们需要编写代码,将从服务器获取的数据进行"渲染&qu
-
React实现双向绑定示例代码
前言 React.js现在已经很流行了,不会React.js都不好意思说自己会前端了. 那么下面就来看看关于React双向绑定的实现. 双向绑定的使用: 组件需要mixins:引用LinkedStateMixin.它提供一个linkState方法. 参数是state属性 双向绑定用valueLink={this.linkState(XX)} linkState方法返回一个对象,有一个value属性,指定state的属性. 还有一个requestChange回调方法,用来实现state的修改.参数
-
React利用插件和不用插件实现双向绑定的方法详解
前言 以前对于双向绑定概念来自于Angular.js,现在我用我感兴趣的react.js来实现这样的方式. 有2种方式分析,1:不用插件,2:用插件 (引入react.js操作省略...) 不用插件: 先创建react组件 var NoLink = React.createClass({}); React.render(<NoLink />,document.body); 组件创建好了,需要一个初始化变量,来公用显示输入的数据 var NoLink = React.createClass({
-
react 父组件与子组件之间的值传递的方法
概念上,组件是封闭的环境.React中是单向数据流的设计,也就是是说只有父组件传递资料给子组件这回事.以正确的技术说明,拥有者组件可以设置被拥有者组件中的数据. 那么子组件要如何与父组件沟通这件事,简单的来说,是一种迂回的作法,在父组件中设置了一个方法(函数),然后传递给子组件的props,子组件在事件触发时,直接呼叫这个props所设置的方法(函数).但这中间,有谁(对象)呼叫了函数的设置,也就是this的作用. 父组件到子组件用props设置,子组件到父组件用上面说的方式,这是基本的套路,但
-
React 子组件向父组件传值的方法
本文介绍了React 子组件向父组件传值的方法,分享给大家 子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件的state变化. /***实现在输入框输入邮箱时,在div中即时显示输入内容***/ <body> <div id="test"></div> </body> //子组件 var Child = React.createClass({ re
-
react 中父组件与子组件双向绑定问题
在项目中我们可能会遇到类似这样的场景,也就是父子组件的双向数据绑定 首先,先把在head中引入react.js.react-dom.js和可选择的babel.js(这里需要注意引用的顺序,react.js必须在react-dom.js之前) <head> <script src="react.js"></script> <script src="react-dom.js"></script> <scr
-
React父组件调用子组件中的方法实例详解
目录 Class组件 1. 自定义事件 2. 使用 React.createRef() 3. 使用回调Refs Function组件 补充:子组件调用父组件方法 总结 文章中涉及 ref 的应用仅为父组件调用子组件场景下的应用方式,并未涵盖 ref 的所有应用方式! Class组件 1. 自定义事件 Parent.js import React, { Component } from 'react'; import Child from './Child'; class Parent exte
-
React中父组件如何获取子组件的值或方法
目录 父组件获取子组件的值或方法 方法一 方法二 方法三 React函数式组件传值之子传父 具体案例 效果展示 父组件获取子组件的值或方法 先来说下从哪获取的启发,想要从父组件获取子组件的值或方法... 一次写代码的时候,用 Antd 中的 Modal 包裹了一个子组件,子组件中包含 input 输入框,想要在点击对话框上面确定按钮时(即Modal 自带的 onOk方法),拿到其中输入的值 下面用一个父组件(Father.js)和子组件(Hearder.js)来演示如何能拿到值和方法: 方法一
-
解决Vue2.x父组件与子组件之间的双向绑定问题
最近在研究如何写一套基于Vue2.x的UI组件给自己用,提升一点BIG,在制作含有input的组件遇到一个问题:不知怎样才能把子组件中input与调用者(父组件)的数据实现双向绑定,想过使用Vuex,但观摩了一下其他优秀的UI框架,发现使用Vuex会给其他使用者造成麻烦,于是决心找到寻求解决方法,在参考了几篇大牛们文章后,终于找到. 在这将解决方案贴出,希望能帮助到和我一样初次接触Vue这个框架的同行们. 子组件的代码逻辑 <template> <div class="ne-i
-
详解React 父组件和子组件的数据传输
在学习 React 框架组件间数据传输知识点前,我们需要先明确几点使用原则. React的组件间通讯是单向的.数据必须是由父级传到子级或者子级传递给父级层层传递. 如果要给兄弟级的组件传递数据,那么就要先传递给公共的父级而后在传递给你要传递到的组件位置. 这种非父子关系的组件间传递数据,不推荐使用这种层层传递的方式:而是选择使用维护全局状态功能模块(Redux) 一.父组件向子组件传递数据 父组件向子组件传递数据是通过在父组件中引用子组件时,在子组件标签设置传输数据的属性:而子组件中通过 thi
-
React前端渲染优化--父组件导致子组件重复渲染的问题
目录 React前端渲染优化--父组件导致子组件重复渲染 说明 一般的优化方式 项目中常见会导致重复渲染的写法以及改进方法 组件重复渲染问题(pureComponent, React.memo, useMemo, useCallback) render执行会带来两个方面的影响 下面将具体说明这几个都使用场景和解决的问题 React前端渲染优化--父组件导致子组件重复渲染 说明 目前我们所使用 react 版本一般会有以下四种方式触发渲染 render,而其中通过父组件 render 会直接通知子
-
react父组件调用子组件的方式汇总
目录 前言 父子组件都为class 父子组件都为hooks 父组件为class,子组件为hooks 父组件为hooks,子组件是class 小结 前言 本文是小结类文章,主要总结一下工作中遇到的父组件调用子组件方法.当然除了用ref之外还有很多其他方式,本文仅仅列举ref的方式.分别介绍父子组件都为class:父子组件都是hooks:父组件是class子组件是hooks:父组件是hooks,子组件是class的各种情况的调用方式. 父子组件都为class 父子组件都是class,父组件调用子组件
-
Vue中父组件向子组件通信的方法
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述.下面通过本文给大家分享Vue中父组件向子组件通信的方法,具体内容详情如下所示: props 组件实例的作用域是孤立的.子组件的模板中是无法直接调用父组件的数据. 可以使用props将父组件的数据传给子组件.子组件在接受数据时要显示声明props 看下面的例子 <div id="app"> <panda here='China'></panda> </div> <s
-
Vue子组件向父组件通信与父组件调用子组件中的方法
子组件向父组件通信 子组件的button按钮绑定点击事件,事件方法名为sendToParent(), 该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg); 在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e), 而msg已经在data中声明,其值为"子级消息",故最终的输出结果为: 展示父级接收到的消息:子级消息 父组件调用子组件