猿创征文｜【React 三】组件实例的三大属性（state、props、refs）
目录
一、 State
1.概念
2.State的简单用法3. JS绑定事件 4.react 绑定事件
5.react this指向问题
6.修改state值
7.代码简写
二、props
1.概念
2.传参的基础方法、运算符传参
三、refs
定义
字符串形式的ref、回调函数下ref、createRef 创建ref容器
一、 State
1.概念
概念：state是组件对象最重要的属性,值是对象(可以包含多个key:value的组合)，组件被称为`状态机`,通过更新组件的state来更新对应的页面显示(重新渲染组件)，有state称为复杂组件。
2.State的简单用法
实现简单的切换效果，这里的效果是一种覆盖
Document
.btn{
width: 100px;
height: 40px;
background-color: red;
}
.on{
background-color: gray;
}
class IsLike extends React.Component {
state = { flag:true }
//箭头函数this指向上下文，静态不可改变
changeFlag=()=>{
this.setState({flag:!this.state.flag})
}
render() {
const {flag}=this.state
return (
{flag?'喜欢':'不喜欢'}
)
}
}
ReactDOM.render(,document.getElementById('root'))
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接收
Document
class GetName extends React.Component {
render() {
return (
姓名：{this.props.realname}
);
}
}
class Person extends React.Component {
render() {
const {realname,age} = this.props
return (
年龄：{age}
);
}
}
let p1 = {realname:'张三',age:19}
ReactDOM.render(,document.getElementById('root'))
三、refs
定义
组件内的标签可以定义ref来标识自己。
字符串形式的ref、回调函数下ref、createRef 创建ref容器
字符串形势，是直接通过ref绑定值，通过在点击事件中获取ref的值，ref如同把整个input表单传了过来，在获取值的时候需要点一下value来获取的是input表单的内容
通过ref中的箭头函数，绑定了值，在方法中直接获取即可，穿过来时，由于react的编译不需要写target但是，还是需要点出value
通过createRef来创建两个容器，通过对象的形势与ref绑定，直接就可以在方法中得到值，不过这里要注意，打印还是获取的时候在点value之前点一个current,如this.realname.current.value
Document
class Person extends React.Component {
//createRef 创建ref容器
realname = React.createRef()
age = React.createRef()
ShowInfo=()=>{
//字符串
// const {realname,age}=this.refs
// console.log(`姓名：${realname.value}年龄：${age.value}`);
//回调函数
// let realname = this.realname.value
// let age = this.age.value
// console.log(`姓名：${realname}年龄：${age}`);
//类绑定
console.log(this.realname.current.value);
console.log(this.age.current.value);
}
render() {
return (
/*字符串形势
提交
*/
//回调函数
//
// this.realname=e}/>
// this.age=e}/>
// 提交
//
//createRef 创建ref容器
提交
);
}
}
ReactDOM.render(,document.getElementById('root'))
还没有评论，来说两句吧...