react 中父组件与子组件双向绑定问题
更新时间：2019年05月20日 14:30:39 作者：不觉南风
这篇文章主要介绍了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 中父组件与子组件双向绑定问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
本文主要介绍了react组件传值的四种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
react antd-mobile ActionSheet+tag实现多选方式
这篇文章主要介绍了react antd-mobile ActionSheet+tag实现多选方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了React-组件渲染和更新的实现代码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
渲染真实DOM的开销很大，有时候我们修改了某个数据，直接渲染到真实dom上会引起整个dom树的重绘和重排。我们希望只更新我们修改的那一小块dom，而不是整个dom，diff算法就帮我们实现了这点。diff算法的本质就是：找出两个对象之间的差异，目的是尽可能做到节点复用2022-11-11
本篇文章主要介绍了React Native之TextInput组件解析示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
详解React项目的服务端渲染改造(koa2+webpack3.11)
本篇文章主要介绍了详解React项目的服务端渲染改造(koa2+webpack3.11)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
useState 通过在函数组件里调用它来给组件添加一些内部 state，React 会在重复渲染时保留这个 state，接下来通过一个示例来看看怎么使用 useState吧2021-06-06
一个路由就是一个映射关系(key:value),key为路径, value可能是function或component,本文给大家介绍React 路由react-router-dom详解,感兴趣的朋友跟随小编一起看看吧2024-01-01
React Hooks之usePolymerAction抽象代码结构设计理念
这篇文章主要为大家介绍了React Hooks之usePolymerAction抽象代码结构设计理念，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
React Hooks是在React 16.8版本新增的特性，在我看了React官网和一些博客对React Hook的讲解后还是觉得没有get到本质。本篇博客通过手动实现useState()来了解Hook的原理和本质。阅读此篇博客的前提是你要知道一些 React Hooks的基本用法和使用规则，不然会看得云里雾里。2021-05-05
最新评论