React组件动状态（入门）

目录

组件状态 ：

 1.初始化状态

 2. 读取状态

 3.修改状态

 4.this问题说明

 5.react的状态不可变

表单处理：

 1. 受控表单组件

 2. 非受控表单组件

---

组件状态 ：

 1.初始化状态

        1）通过class的实例属性state来初始化

        2）state的值是一个对象结构，表示一个组件可以有多个数据状态

class Counter extends React.Component {
  // 初始化状态
  state = {
    count: 0
  }
  render() {
    return <button>计数器</button>
  }
}

2. 读取状态

        通过this.state来获取状态 

class Counter extends React.Component {
  // 初始化状态
  state = {
    count: 0
  }
  render() {
    // 读取状态
    return <button>计数器{this.state.count}</button>
  }
}

 3.修改状态

        1）语法：this.setState({ 需要修改的数据 }) 

        2）setState方法作用：

                1- 修改state中的数据状态

                2- 更新UI

        3）思想：数据驱动视图，也就是只要修改数据状态，那么页面就会自动刷新，无需手动操作dom

        注：不要直接修改state中的值，必须通过setState方法进行修改

class Counter extends React.Component {
  // 定义数据
  state = {
    count: 0
  }
  // 定义修改数据的方法
  setCount = () => {
    this.setState({
      count: this.state.count + 1
    })
  }
  // 使用数据 并绑定事件
  render () {
    return <button onClick={this.setCount}>{this.state.count}</button>
  }
}

4.this问题说明

        注：随着js标准的发展，主流的写法使用class fields，无需考虑太多this问题，了解即可

 

 5.react的状态不可变

        概念：不要直接修改状态的值，而是基于当前状态创建新的状态值

        1）错误直接修改：

state = {
  count : 0,
  list: [1,2,3],
  person: {
     name:'jack',
     age:18
  }
}
// 直接修改简单类型Number
this.state.count++
++this.state.count
this.state.count += 1
this.state.count = 1

// 直接修改数组
this.state.list.push(123)
this.state.list.spice(1,1)

// 直接修改对象
this.state.person.name = 'rose'

       2） 基于当前状态创建新值

this.setState({
    count: this.state.count + 1
    list: [...this.state.list, 4],
    person: {
       ...this.state.person,
       // 覆盖原来的属性 就可以达到修改对象中属性的目的
       name: 'rose'
    }
})

表单处理：

        使用React处理表单元素，一般有俩种方式：

                1）受控组件 （推荐使用）

                2）非受控组件 （了解）

 1. 受控表单组件

什么是受控组件？ input框自己的状态被React组件状态控制

React组件的状态的地方是在state中，input表单元素也有自己的状态是在value中，React将state与表单元素的值（value）绑定到一起，由state的值来控制表单元素的值，从而保证单一数据源特性

        1）实现步骤：

                以获取文本框的值为例，受控组件的使用步骤如下：

                1- 在组件的state中声明一个组件的状态数据

                2- 将状态数据设置为input标签元素的value属性的值

                3- 为input添加change事件，在事件处理程序中，通过事件对象e获取到当前文本框的值（即用户当前输入的值）

                4- 调用setState方法，将文本框的值作为state状态的最新值

        2）相关代码：

import React from 'react'

class InputComponent extends React.Component {
  // 声明组件状态
  state = {
    message: 'this is message',
  }
  // 声明事件回调函数
  changeHandler = (e) => {
    this.setState({ message: e.target.value })
  }
  render () {
    return (
      <div>
        {/* 绑定value 绑定事件*/}
        <input value={this.state.message} onChange={this.changeHandler} />
      </div>
    )
  }
}

function App () {
  return (
    <div className="App">
      <InputComponent />
    </div>
  )
}
export default App

2. 非受控表单组件

什么是非受控组件？

非受控组件就是通过手动操作dom的方式获取文本框的值，文本框的状态不受react组件的state中的状态控制，直接通过原生dom获取输入框的值

        1）实现步骤：

                1- 导入 createRef 函数

                2- 调用createRef函数，创建一个ref对象，存储到名为msgRef的实例属性中

                3- 为input添加ref属性，值为msgRef

                4- 在按钮的事件处理程序中，通过msgRef.current即可拿到input对应的dom元素，而其中msgRef.current.value拿到的就是文本框的值

         2)相关代码：

import React, { createRef } from 'react'

class InputComponent extends React.Component {
  // 使用createRef产生一个存放dom的对象容器
  msgRef = createRef()

  changeHandler = () => {
    console.log(this.msgRef.current.value)
  }

  render() {
    return (
      <div>
        {/* ref绑定 获取真实dom */}
        <input ref={this.msgRef} />
        <button onClick={this.changeHandler}>click</button>
      </div>
    )
  }
}

function App () {
  return (
    <div className="App">
      <InputComponent />
    </div>
  )
}
export default App

文章推荐：

        1.创建React项目(入门保姆级）

        2.JSX基础（入门）

        3.React组件（入门）

        4.CSS单行/多行文本溢出显示省略号(...)

        5. css中background属性引入图片url()中地址