React组件实例三大属性state props refs使用详解_React_

一、 State

1.概念

概念：state是组件对象最重要的属性,值是对象(可以包含多个key:value的组合)，组件被称为状态机,通过更新组件的state来更新对应的页面显示(重新渲染组件)，有state称为复杂组件。

2.State的简单用法

实现简单的切换效果，这里的效果是一种覆盖

编辑

3. JS绑定事件

let btn = document.getElementById('btn'); btn.addEventListener('click',function(){ alert('按钮被点击了!'); }) btn.onclick = function(){ alert('按钮被点击了!'); } function demo(){ alert('按钮被点击了'); } 

4.react 绑定事件

render(){ return {this.state.isflag?'已关注':'取消关注'} } 

说明：

·onclick 变为 onClick。

·{函数名}返回值给click，加()就会直接调用。

5.react this指向问题

demo(){ console.log(this);//undefined console.log('事件被点击了'); } 

举例说明：

class Person{ constructor(name,age) { this.name = name; this.age = age; } say(){ console.log(this); } } const p1 = new Person('张三',18); p1.say();//p1为实例对象 const p2 = p1.say; p2();//undefined 类采取是严格模式 

6.修改state值

class MyClass extends React.Component{ constructor(props) { super(props); this.state = {isflag:true}; this.demo = this.demo.bind(this); }render(){ return {this.state.isflag?'已关注':'取消关注'} } demo(){ this.setState({isflag:!this.state.isflag}) }} ReactDOM.render(,document.getElementById('root')); 

说明：

bind会生成一个新的方法 并传对象 改变this的指向必须使用setState 修改才有效，修改内容为合并。有值得修改没有的不动

7.代码简写

class MyClass extends React.Component{ state = {isflag:true} render(){ return {this.state.isflag?'已关注':'取消关注'} } demo = () => { this.setState({isflag:!this.state.isflag}) } } ReactDOM.render(,document.getElementById('root')); 

说明：

类中的属性直接赋值，省去构造函数。

自定义方法—用赋值语句的形式+箭头函数

二、props

1.概念

每个组件对象都会有props(properties的简写)属性。

组件标签的所有属性都保存在props中。

props 是不可变的，只能通过 props 来传递数据。

2.传参的基础方法、运算符传参

其中先通过let创建了一个对象，在通过三点运算符，来遍历得到，对象里面的值

在通过对象结构得到props中的realname和age,GetName是Person组件的子组件，在Person中传值给GetName,GetName通过props接收

三、refs

定义

组件内的标签可以定义ref来标识自己。

字符串形式的ref、回调函数下ref、createRef 创建ref容器

字符串形势，是直接通过ref绑定值，通过在点击事件中获取ref的值，ref如同把整个input表单传了过来，在获取值的时候需要点一下value来获取的是input表单的内容

通过ref中的箭头函数，绑定了值，在方法中直接获取即可，穿过来时，由于react的编译不需要写target但是，还是需要点出value

通过createRef来创建两个容器，通过对象的形势与ref绑定，直接就可以在方法中得到值，不过这里要注意，打印还是获取的时候在点value之前点一个current,如this.realname.current.value

以上就是React组件实例三大属性state props refs使用详解的详细内容，更多关于React组件state props refs的资料请关注其它相关文章！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！