·前端小李
·前端小李

react组件知识

1.React组件创建的两种方式

   1-1.Js中的函数创建组件

import ReactDom from 'react-dom'

const Com1 = 

const app = (
  

    函数式组件
    
  

)
ReactDom.render(app, document.getElementById('root'))

1-2.Js中的class创建组件

// eslint-disable-next-line no-use-before-define
import React from 'react'
import ReactDom from 'react-dom'
// 类里面不能有逗号
// 如果用到了constructor就要写super(),是用来初始化this的，可以绑定事件到this上，
class Com1 extends React.Component {
  constructor () {
    super()
    this.state = {
      num: 1000
    }
  }

  state = {
    num: 1000
  }

  render () {
    const { num } = this.state
    return (
      

        
class创建组件

        
num的值是：{num}

      

    )
  }
}
const app = (
  

    class创建组件
    
  

)
ReactDom.render(app, document.getElementById('root'))

2.有状态与无状态组件

什么是状态

状态定义：是用来描述事物在某一时刻的形态的数据。一般称为state。例如：9月23号时书的库存数量； 18岁时人的身高；

有状态组件与无状态组件

能定义state的组件 类组件就叫有状态组件

不能够定义state的组件  函数组件 就叫无状态组件

注意：2019年02月06日，rect 16.8中引入了 React Hooks，从而函数式组件也能定义自己的状态了

3.事件绑定

  • 绑定事件需要传值在事件外面套一个箭头函数  里面的函数进行传值即可
  • 方法写箭头函数才可以解决this是undefined的情况  具体原因请移步另一篇博客react中绑定事件this指向问题_m0_52765288的博客-CSDN博客import { Component } from 'react'import ReactDom from 'react-dom'class Com1 extends Component { constructor () { super() this.state = { num: 100 } } hClick () { // alert(1) console.log(this) } render () { return.https://blog.csdn.net/m0_52765288/article/details/121178034
  • 遵循小驼峰命名法     
  • 在方法中 使用形参e就可以接收到事件对象了 
class Com1 extends Component {
  constructor () {
    super()
    this.state = {
      num: 100
    }
  }

  hClick= (e) =>{
    // alert(1)
    console.log('hClick', this)
  }

  hClick2 = () => {}

  render () {
    const id = 1
    console.log('render', this)
    return (
      

        
事件绑定

        
        
      

    )
  }
}

4.组件修改状态

 react核心理念之状态不可变  

需要修改state中的状态 需要通过setState来修改状态

  • setState中必须是一个对象
  • 状态不可变
class Com1 extends Component {
  constructor () {
    super()
    this.state = {
      num: 100
    }
  }

  hClick= (e) =>{
    // alert(1)
    console.log('hClick', this)
    this.setState({    //修改state中的值使用setState
    num:10000
})
  }

  hClick2 = () => {}

  render () {
    const id = 1
    console.log('render', this)
    return (
      

        
事件绑定

        
        
      

    )
  }
}

5.获取元素表单的值

5.1 ref来获取元素表单的值

分四步：

  1. 导入createRef方法
  2.  调用createRef方法创建引用
  3. 给表单元素设置ref属性
  4. 通过current.value获取当前非受控组件的值
// 1.导入createRef 方法
import { Component, createRef } from 'react'
import ReactDOM from 'react-dom'

class HelloReact extends Component {
  // 2.调用createRef方法调用引用
  inputRef = createRef()
  state = {
    name: 'jack'
  }

  hClick = () => {
    // 4.通过current.value来获取当前dom元素
    console.log(this.inputRef.current.value)
  }

  render () {
    return (
      

        {/* 3.给表单绑定ref的值 */}
        
        
      

    )
  }
}

const app = (
  

    app
    {/* 2.使用组件 */}
    
  

)

ReactDOM.render(app, document.getElementById('root'))

5.2 获取受控组件的value

 基本步骤

  1. 在state中定义状态
  2. 对表单元素做两件事

        2.1绑定value属性与表单关联

        2.2 绑定onChange事件 并在回调中通过setState来修改状态值

import { Component } from 'react'
import ReactDOM from 'react-dom'
class HelloReact extends Component {
  inputRef = createRef()
  // 1.state定义
  state = {
    content: ''
  }

  hClick = (e) => {
    // 3.通过事件对象进行赋值 e.target.value可以拿到表单的值
    this.setState({
      content: e.target.value
    })
  }

  render () {
    return (
      

        {/* 2.value值进行绑定 并绑定onChange事件 */}
        
        
      

    )
  }
}
const app = (
  

    app
    
  

)

ReactDOM.render(app, document.getElementById('root'))

6.拓展常见的受控组件

  • 文本框、文本域、下拉框：value属性 + onChange事件

  • 复选框: checked属性 + onChange事件

  • 单选按钮组：checked属性 + onChange事件

代码如下

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  state = {
    username: '',
    desc: '',
    city: '2',
    isSingle: true,
    gender: '男'
  }

  handleName = (e) => {
    this.setState({
      username: e.target.value
    })
  }

  handleDesc = (e) => {
    this.setState({
      desc: e.target.value
    })
  }

  handleCity = (e) => {
    this.setState({
      city: e.target.value
    })
  }

  handleSingle = (e) => {
    this.setState({
      isSingle: e.target.checked
    })
  }

  hGender = (e) => {
    this.setState({
      gender: e.target.value
    })
  }

  render () {
    return (
      

        姓名：
        

        描述：