React入门---事件与数据的双向绑定-9

上一节中，我们是从父组件给子组件传送数据，要实现事件与数据的双向绑定，我们来看如何从子组件向父组件传送数据;

接触之前，我们看一些里面函数绑定的知识：

例：通过点击事件改变state的age属性值：

export default class ComponentFooter extends React.Component{constructor(){super();this.state = {username:"azedada",age:24}}//事件函数 改变state的age
    changeAge(){this.setState({age:18})}render(){return(<div><h1>这里是底部</h1><p>{this.state.username}:{this.state.age},{this.props.userId}</p> {/*这里写点击事件，注意写法是es6*/}<input type="button" value="点击改变年龄" onClick={this.changeAge.bind(this)}/></div>
            )}//运行结果 24变为18
}

接下来，我们看如何从子组件向父组件传送数据，

建立一个BodyIndex的子组件：bodychild，现在做的是在子组件bodychild更改的内容立马反馈更新到BodyIndex;

例：这个子页面是bodychild.js

import React from 'react';export default class BodyChild extends React.Component{render(){return(<div>{/*子页面向父页面传递参数，只能通过事件的形式，调用父页面props传过来的参数，这个参数是一个事件函数我们在父页面定义这个函数，并且接收原生函数定义好的event这个参数*/}<p>子页面输出：<input type='text' onChange={this.props.changeUsername}/></p></div>
            )}
}

重点：子页面向父页面传递参数，只能通过事件的形式，调用父页面props传过来的参数，这个参数是一个事件函数；我们在父页面定义这个函数，并且接收原生函数定义好的event这个参数；

下面是父页面BodyIndex.js

import React from 'react';
import ReactDOM from 'react-dom';
//将子页面bodychild引用进来
import BodyChild from './bodychild.js';export default class BodyIndex extends React.Component{constructor(){super();this.state = {username : "azedada"} }//定义事件函数，通过子页面bodychild对username的改变，将显示出来的username改变;
    changeUsername(event){this.setState({username:event.target.value})}render(){return(<div><h1>这里是主体容部分</h1>{/*显示主页面的username的值*/}<p>username：{this.state.username}</p>{/*下面是子页面组件，在这里输入内容，将改变username的值*/}<BodyChild changeUsername={this.changeUsername.bind(this)}/></div>
            )}
}

以上就是子组件向父组件传送数据;

扩展:在子组件可以向父组件传送数据的时候，父组件通过点击事件，实现将这个数据改为定值，如何操作：

添加点击事件，进行传参即可：

import React from 'react';
import ReactDOM from 'react-dom';
//将子页面bodychild引用进来
import BodyChild from './bodychild.js';export default class BodyIndex extends React.Component{constructor(){super();this.state = {username : "azedada"} }//父组件点击事件
    recover(str){this.setState({username:str})}//定义子组件事件函数，通过子页面bodychild对username的改变，将显示出来的username改变;
    changeUsername(event){this.setState({username:event.target.value})}render(){return(<div><h1>这里是主体容部分</h1>{/*显示主页面的username的值*/}<p>username：{this.state.username}</p>{/*下面是子页面组件，在这里输入内容，将改变username的值*/}<BodyChild changeUsername={this.changeUsername.bind(this)}/>{/*点击将username变为"azedada",在bind()进行传参*/}<input type="button" value="点击恢复" onClick={this.recover.bind(this,"azedada")}/></div>
            )}
}

转载于:https://www.cnblogs.com/azedada/p/6857676.html

React入门---事件与数据的双向绑定-9相关推荐

AngularJS数据的双向绑定
数据的双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-controlle ...
【Vue2 组件间数据的双向绑定】
组件间数据的双向绑定一.通过自定义事件二.通过v-model 三.通过.sync修饰符四.provide和inject 代码中的p-8,mt-8等,都是自己写的工具类,复制代码的同学,可以自行删 ...
【Vue】—数据的双向绑定v-model
[Vue]-数据的双向绑定v-model
vue3数据的双向绑定
vue3关于数据的双向绑定一.script setup 现在,没必要把数据写到data里面,或者是写一个setup函数,再进行return出去. import进来的组件,可以直接在页面中使用,不再需 ...
Vue之数据的双向绑定
在vue中实现数据双向绑定的核心在于v-model 示例: <input type="text" name=" " v-model="userN ...
v-model实现数据的双向绑定
Vue.js提供了v-model指令,用于在表单类元素上双向绑定数据, 比如,在数据框上使用时,输入的内容会实时映射到绑定的数据上. <div id="app">< ...
微信小程序input数据的双向绑定
先来看一下html代码再来看下js代码这种绑定实例就是给input的一个bindinput属性,指定了一个方法名字.如果想要实现双向绑定,必须使用this.setdata这个方法. 注意!我们在发 ...
Vue中实现父子组件的数据的双向绑定（vue.sync的用法）
项目场景: 前两天日常开发时,遇到需要父子组件双向绑定的问题,出现了一些BUG,但是考虑到组件的可维护性,vue中是不允许子组件改变父组件传的props值的问题描述: 问题场景就是子组件传递数据给父 ...
angularjs input标签用一个日期插件后数据不能双向绑定了_微信如何定时发朋友圈？（最方便最好用的办法！）...
微信怎么发朋友圈(微信如何定时发朋友圈)作为一个运营新媒体的小编,很多情况下,我都会遇到定时发文的情况,对于我来说,定时发文很简单. 只要将文案编辑好,使用平台的定时发文功能就可以,所以,我就想,微信 ...

React入门---事件与数据的双向绑定-9

React入门---事件与数据的双向绑定-9相关推荐

最新文章

热门文章