郑州网站建设汉狮,dw不用代码做网页,企业网站建设入账,热点 做网站和营销 我只服他#x1f380;个人主页#xff1a;努力学习前端知识的小羊 感谢你们的支持#xff1a;收藏#x1f384; 点赞#x1f36c; 加关注#x1fa90; 文章目录setState属性(props)属性vs状态非受控组件受控组件setState this.state是纯js对象#xff0c;在vue中#xff0c;dat… 个人主页努力学习前端知识的小羊 感谢你们的支持收藏 点赞 加关注 文章目录setState属性(props)属性vs状态非受控组件受控组件setState this.state是纯js对象在vue中data属性是利用object.defineProperty处理过的更改data数据的时候会触发数据的getter和setter但是React没有做这样的处理所以不能直接更改this.state中的值需要使用特殊的更改状态的方法setState 以下方代码为例对button按钮绑定onClick事件点击按钮改变this.state中的myshow值和myname值从而判断是收藏还是取消收藏
export default class App extends Component {constructor(){super()this.state {mytext:收藏,myshow:true,myname:kerwin}}render() {return (divh1欢迎来到React开发-{this.state.myname}/h1button onClick{(){this.setState({myshow:!this.state.myshow,myname:xiaoming}) //间接修改收藏if(this.state.myshow){console.log(收藏的逻辑);} else{console.log(取消收藏的逻辑);}}}{this.state.myshow?收藏:取消收藏}/button/div)}
}
setState有两个参数
第一个参数可以是对象也可以是方法return一个对象 参数是对象 this.setState({myshow:!this.state.myshow,myname:xiaoming}) 参数是方法 this.setState((prevState,props){return {myshow:!prevState.myshow,}
})该方法中接受了两个参数一个是上一次的state一个是pops
属性(props) props是外部传入的数值组件内部也可以通过一些方式进行初始化的设置属性不能被组件自己更改但是可以通过父组件组东重新渲染的方式来传入新的props props的使用在使用一个组件的时候可以把参数放在标签的属性当中这些属性都会作为组件props对象的键值 在组件上通过keyvalue写属性通过this.props获取属性 在传参时候如果写成isshow true那么传过去的数值是一个字符串如果写成isshow {true}这时传过去的是布尔值 {…对象}利用ES6展开赋值 默认属性值 // 默认属性static defaultProps{leftshow:true //如果组件中没有传leftshow的键值则默认leftshow值为true}属性验证prop-types import kerwinPropTypes from prop-types// 类属性static propTypes {title:kerwinPropTypes.string, //验证数值是否为字符串leftshow:kerwinPropTypes.bool // 验证数值是否为布尔值}属性vs状态
相似点:都是纯js对象都会触发render更新都具有确定性状态/属性相同结果相同)
不同点: 属性能从父组件获取状态不能 属性可以由父组件修改状态不能 属性能在内部设置默认值状态也可以设置方式不一样 属性不在组件内部修改状态要在组件内部修改 属性能设置子组件初始值状态不可以 属性可以修改子组件的值状态不可以 state的主要作用是用于组件保存、控制、修改自己的可变状态。state在组件内部初始化可以被组件自身修改而外部不能访问也不能修改。state中状态可以通过this.setstate方法进行更新setstate会导致组件的重新渲染。 props的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数组件内部无法控制也无法修改。除非外部组件主动传入新的props否则组件的 props永远保持不变。 非受控组件
React要编写一个非受控组件可以使用ref来从Dom节点中获取表单数据即为非受控组件
import React, { Component } from reactexport default class App extends Component {myusername React.createRef()render() {return (divh1登录页/h1input typetext ref {this.myusername} valuelll/button onClick{(){console.log(this.myusername.current.value);}}登录/buttonbutton onClick{(){this.myusername.current.value }}重置/button/div)}
}在该非受控组件中input表单中的值无法改变永远都是‘lll’因为非受控组件将真实的数据储存在Dom节点中
受控组件
通过state状态来改变表单中的值对于受控组件来说输入的值始终由React的state驱动
import React, { Component } from reactexport default class App extends Component {state{myusername:kerwin}render() {return (divh1登录页/h1input typetext value{this.state.myusername}onChange{(evt){console.log(onchange,evt.target.value);this.setState({myusername:evt.target.value})}}/button onClick{(){console.log(this.state.myusername);}}登录/buttonbutton onClick{(){this.setState({myusername:})}}重置/button/div)}
}
表单中的value值为state.myusername值因此每次触发onChange绑定的事件改变state.myusername值则表单中的value也随之改变因此input表单中的值随着用户的输入而更新
希望对大家有所帮助期待你们的支持✨✨✨
