[JavaScript知识库]学习react的第三天

React 第三天的学习

state和setState

1. 组件有两种状态
2. 函数组件叫做无状态组件,类组件叫做有状态组件
3. 状态（state） 既数据
4. 函数组件没有自己的状态,只负责数据的展示（静）
5. 类组件有自己的状态，负责展示页面的更新，让页面动起来

state的基本使用

2. 状态即数据
3. 状态是私有的
4. 在类中是用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指向的问题

1. 可以通过箭头函数解决

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

2. 通过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

3. 通过 变量箭头函数解决 （我比较喜欢叫这个,这个看起来就很方便😓)

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

受控组件

1. 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

非受控组件

1. 非受控组件是通过创建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