React 第三天的学习
state和setState
- 组件有两种状态
- 函数组件叫做无状态组件,类组件叫做有状态组件
- 状态（state） 既数据
- 函数组件没有自己的状态,只负责数据的展示（静）
- 类组件有自己的状态，负责展示页面的更新，让页面动起来
state的基本使用
- 状态即数据
- 状态是私有的
- 在类中是用this.state获取
state是一个对象作用：修改 ui 状态（数据）
修改state数据可通过this.setState修改
class Count extends react.Component{
state={
count:0,
}
render(){
return (<div>
<input type="button" value="+1" onClick={()=>{
this.setState({
count:this.state.count+=1
})
}}/>
<span>{this.state.count}</span>
</div>)
}
}
reactDOM.render(<Count/>,document.querySelector("#root"))
解决事件处理this指向的问题
- 可以通过箭头函数解决
import react from 'react'
import reactDom from 'react-dom'
// 解决事件绑定this指向问题
// 1. 利用箭头函数自身不绑定this的特点
class Component extends react.Component{
state={
count:0,
}
interface(){
console.log(this.state.count)
}
render(){
return (
<div>
<input type="button" value='+1' onClick={()=>{return this.interface()}}/>
<span>-{this.state.count}</span>
</div>
)
}
}
export default Component
- 通过es5 bind()函数方法改变this指向
import react from 'react'
import reactDom from 'react-dom'
// 解决事件绑定this指向问题
// 使用原生js bind()方法改变this指向
class Bind extends react.Component{
constructor(){
super()
this.state={
count:0,
}
// 使用bind改变this指向
this.interface=this.interface.bind(this)
}
interface(){
console.log(this)
};
render(){
return (
<div>
<input type="button" value='+1' onClick={this.interface}/>
<span>-{this.state.count}</span>
</div>
)
}
}
export default Bind
- 通过 变量箭头函数解决 （我比较喜欢叫这个,这个看起来就很方便😓)
import react from 'react'
import reactDom from 'react-dom'
// 解决事件绑定this指向问题
// 1. 利用箭头函数自身不绑定this的特点
class ClassFun extends react.Component{
state={
count:0,
}
// 变量函数（我喜欢叫这个）
interface=()=>{
this.setState({
count:this.state.count+=1,
})
}
render(){
return (
<div>
<input type="button" value='+1' onClick={()=>{return this.interface()}}/>
<span>{this.state.count}</span>
</div>
)
}
}
export default ClassFun
受控组件
- HTML表单的值保存在state数据中
// 受控组件
// 提示1：react state和vue v-model 双向绑定是不一样的 要改变state数据必须使用 setState
// 提示2：返回的标签并不能两个 比如：return (<span></span><div></div>)这样写是错误的就像vue在template写两个组件一样
// 实现了类似于vue 双向绑定的案例:
class Input extends react.Component{
state={
value:",
selectValue:",
flg:true,
}
showInput=(e)=>{
this.setState({
value:e.target.value
})
}
// 下拉框
updateSelectValue=(e)=>{
this.setState({
selectValue:e.target.value
})
}
updateFlg=(e)=>{
this.setState({
flg:!this.state.flg,
[e.target.name]:e.target.checked
})
}
render(){
return (
<div>
<input name='showInput' type={this.state.value} onInput={this.hand}/>
<span>{this.state.value}</span>
{/* 富文本框不想演示和文本框一样 */}
<div>
<textarea defaultValue={this.state.content}></textarea>
</div>
{/* 下拉框 */}
<div>
<select name='selectValue' value={this.state.selectValue} onChange={this.hand}>
<option value="sh">上海</option>
<option value="bj">北京</option>
</select>
</div>
<div>
<input name='checked' type='checkbox' checked={this.state.flg} onChange={this.hand}></input>复选框的变化:{this.state.flg ? '1' : '0'}
</div>
</div>
)
}
}
export default Input
非受控组件
- 非受控组件是通过创建ref方式保存;
//(感觉不是很好用)
// 受控组件通过原生DOM的方式获取表单元素值
// 通过ref 原生DOM 获取表单的值
class CreateRef extends react.Component{
constructor(){
super()
this.value=react.createRef();
// 通过React.createRef()创建一个ref对象
}
change=()=>{
console.log(this.value.current)
}
render(){
return (
<div>
{/* 表单通过ref获取值 */}
<input type='text' ref={this.value} onInput={this.change}></input>
{/* <span ref=''></span> */}
</div>
)
}
}
export default CreateRef
|