【React】setState修改状态

且陶陶

发布于 2023-04-12 15:57:31

6520

发布于 2023-04-12 15:57:31

文章被收录于专栏：Triciaの小世界

React(三)

修改状态【数据驱动视图思想】

通过setState修改状态

作用：

修改state
更新ui

语法：this.setState({要修改的部分数据})

💡 注意：不能直接修改state中的数据，而是要设置新值去覆盖。

// 1. 导包
import React from 'react'
import ReactDom from 'react-dom/client'
// 类组件  有状态  如果有状态，状态需要切换，更新视图 用类组件
class App extends React.Component {
  state = {
    name: 'Tt',
    age: 18,
  }
  handleClick = () => {
    // 修改state中的数据，用this.setState({修改的数据})
    // 注意：不能直接改state中的数据
    this.setState({
      // 这里用 ++ 是无效的
      age: this.state.age + 1,
    })
  }
  render() {
    console.log(this) //App组件
    return (
      <div>
        <button onClick={this.handleClick}>年纪++</button>
        <p>{this.state.age}</p>
      </div>
    )
  }
}
const VNode = (
  <div>
    <App></App>
  </div>
)
ReactDom.createRoot(document.querySelector('#root')).render(VNode)

React状态不可变

所谓状态不可变，指的就是不能直接修改state中的数据，而是要设置新值去覆盖。

例如

// 1. 导包
import React from 'react'
import ReactDom from 'react-dom/client'
// 类组件  有状态  如果有状态，状态需要切换，更新视图 用类组件
class App extends React.Component {
  state = {
    name: 'Tt',
    age: 18,
    boyfriend: [14, 17, 13, 16],
    like: {
      play: 10,
      study: 4,
    },
  }
  handleClick = () => {
    // 修改state中的数据，用this.setState({修改的数据})
    // 注意：不能直接改state中的数据
    this.setState({
      // 这里用 ++ 是无效的
      name: 'Tricia',
      age: this.state.age + 1,
      boyfriend: [...this.state.boyfriend, 21],
      like: { ...this.state.like, read: 8 },
    })
  }
  render() {
    console.log(this) //App组件
    return (
      <div>
        <button onClick={this.handleClick}>年纪++</button>
        <p>{this.state.name}</p>
        <p>{this.state.age}</p>
        <p>{this.state.boyfriend}</p>
        <p>{this.state.like.play}</p>
        <p>{this.state.like.study}</p>
      </div>
    )
  }
}
const VNode = (
  <div>
    <App></App>
  </div>
)
ReactDom.createRoot(document.querySelector('#root')).render(VNode)

不能直接修改state中的数据，而是要设置新值去覆盖。

表单处理

受控组件

实现方式：

input上绑定一个OnChange事件
绑定的事件改变state状态

💡 类似于VUE中的双向数据绑定。实现就是：表单项的数据和state中的状态相互关联。

// 1. 导包
import React from 'react'
import ReactDom from 'react-dom/client'

// 表单元素，受控组件就是将状态和输入框的值绑定
// 输入框中的值修改之后，反向绑定到状态中。
class App extends React.Component {
  state = {
    name: 'Tricia',
    isAgree: true,
  }
  changeHandle = (e) => {
    // 将输入的值同步给state中的name
    // 1. 得到输入的值
    console.log(e.target.value)
    // 2. 修改state中的值
    this.setState({
      name: e.target.value,
    })
  }
  changeChecked = () => {
    this.setState({
      isAgree: !this.state.isAgree,
    })
  }
  render() {
    console.log(this) //App组件
    return (
      <div>
        <input value={this.state.name} onChange={this.changeHandle} />
        <input
          type="checkbox"
          checked={this.state.isAgree}
          onChange={this.changeChecked}
        />
      </div>
    )
  }
}
const VNode = (
  <div>
    <App></App>
  </div>
)
ReactDom.createRoot(document.querySelector('#root')).render(VNode)

非受控组件 - ref

通过手动操作DOM的方法来控制

实现方式：

导入creatRef，并创建一个ref对象。
和结构绑定
获取值

// 1. 导包
import { Component, createRef } from 'react'
import ReactDom from 'react-dom/client'

// 非受控组件是通过ref配合获取到表单元素的值

/* 
  步骤：
    1. 导入creatRef，并创建一个ref对象。
    2. 和结构绑定
    3. 获取值

*/
class App extends Component {
  // 1.
  iptRef = createRef()
  state = {
    name: 'Tricia',
  }
  handleClick = () => {
    console.log(this.iptRef.current.value)
  }
  render() {
    console.log(this) //App组件
    return (
      <div>
        {/* 2. */}
        <input type="text" ref={this.iptRef} />
        <button onClick={this.handleClick}>按钮</button>
      </div>
    )
  }
}
const VNode = (
  <div>
    <App></App>
  </div>
)
ReactDom.createRoot(document.querySelector('#root')).render(VNode)