从零开始react(3)

在学习过react组件和react组件状态后,我们继续来学习react组件的状态-修改状态.

组件的状态-修改状态:

在之前我们知道定义状态是使用state = 对象来做初始化,那么我么在做修改状态是直接修改state中的值来来让视图变化么?

答案肯定不是来直接修改state里面的值来让视图变化,在react中状态是不可变的,就是说不要直接修改当前状态值,而是创建新的状态值.而要修改就需要用到setState函数.

setState函数:

• 语法 :this.setState({ 要修改的部分数据 })
• 作用: 1 修改 state 2 更新 UI
• 来源:  继承而来
• 注意: ①要修改就有数据传入②不能直接修改state中的值来让视图改变

代码演示:

  state = {
    count: 0,
    list: [1, 2, 3],
    person: {
      name: 'jack',
      age: 18
    }
  }
  
  // 【不推荐】直接修改当前值的操作：
  this.state.count++
  ++this.state.count
  this.state.count += 1
  this.state.count = 1
  this.state.list.push(4)
  this.state.person.name = 'rose'
  
  // 【推荐】不是直接修改当前值，而是创建新值的操作：
  this.setState({
    count: this.state.count + 1,
    list: [...this.state.list, 4],
    person: {
      ...this.state.person,
    	// 要修改的属性，会覆盖原来的属性，这样，就可以达到修改对象中属性的目的了  
      name: 'rose'
    }
  })

 小案例:

// state 数据

 state = {
    name: 'jack',
    assets: [
      {
        id: 1,
        name: '手机'
      },
      {
        id: 2,
        name: '耳机'
      }
    ],
    skill: [ 'vue', 'react' ], // 将angular加入skill
    info: {
      age: 18,
      city: '武汉'
    }
  }

 参考代码:

import { Component } from 'react'
import ReactDOM from 'react-dom'

class HelloReact extends Component {
  state = {
    name: 'jack',
    assets: [
      {
        id: 1,
        name: '手机'
      },
      {
        id: 2,
        name: '耳机'
      }
    ],
    skill: [ 'vue', 'react' ], // angular
    info: {
      age: 18,
      city: '武汉'
    }
  }

  hClick1 = () => {
    console.log(this.state.name)
    this.setState({
      name: '小花'
    })
  }

  hClick2 = () => {
    console.log(this.state.info.age)
    this.setState({
      info: {
        ...this.state.info,
        age: 20
      }
    })
  }

  hClick3 = () => {
    const Newassets = [ ...this.state.assets ]
    Newassets[0].name = '电脑'
    this.setState({
      assets: Newassets
    })
  }

  hClick4 = () => {
    const newSkill = [ ...this.state.skill ]
    newSkill.push('angular')
    this.setState({
      skill: newSkill
    })
  }

  hClick5 = () => {
    const Newassets = this.state.assets.filter((item) => item.id !== 2)
    this.setState({
      assets: Newassets
    })
  }

  render () {
    const { name, assets, skill, info } = this.state
    return (
      <div>
        <p> 姓名: {name} </p>{' '}
        <p>
          age： {info.age}, city: {info.city}{' '}
        </p>{' '}
        <div>
          资产:{' '}
          <ul> {assets.map((item) => <li key={item.id}> {item.name} </li>)}</ul>
        </div>{' '}
        <p> skill: {skill.join(', ')} </p> <hr />{' '}
        {/*
        1. 把name改成'小花'
        2. 把age改成20
        3. 把'手机'改成'电脑'
        4. 向skill中添加'angular'
        5. 删除id为2的assets */}
        <button onClick={this.hClick1}> 1. 把name改成小花 </button>{' '}
        <button onClick={this.hClick2}> 2. 把age改成20 </button>{' '}
        <button onClick={this.hClick3}> 3. 把手机改成电脑 </button>{' '}
        <button onClick={this.hClick4}> 4. 向skill中添加angular </button>{' '}
        <button onClick={this.hClick5}> 5. 删除id为2的assets </button>{' '}
      </div>
    )
  }
}

const app = (
  <div>
    {/* 2.使用组件 */} <HelloReact />
  </div>
)

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

学习了修改状态后我们来看看表单处理-受控组件

表单处理-受控组件

使用React处理表单元素的两种方式:

• 受控组件【推荐】
• 非受控组件

受控组件:

• HTML中表单元素是可输入的，即表单用户并维护着自己的可变状态（value）。

• 但是在react中，可变状态通常是保存在state中的，并且要求状态只能通过setState进行修改。

• React中将state中的数据与表单元素的value值绑定到了一起，由state的值来控制表单元素的值

• 受控组件：value值受到了react控制的表单元素

示例代码:

class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleChange = (e) => {
    this.setState({
      msg: e.target.value
    })
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.msg} onChange={this.handleChange}/>
      </div>
    )
  }
}

注意:使用受控组件的方式处理表单元素后，状态的值就是表单元素的值。即：想要操作表单元素的值，只需要操作对应的状态即可

非受控组件-ref

• 受控组件是通过 React 组件的状态来控制表单元素的值

• 非受控组件是通过手动操作 DOM 的方式来控制

• 此时，需要用到一个新的概念：ref

• ref：用来在 React 中获取 DOM 元素

示例代码:

import { createRef } from 'react'

class Hello extends Component {
  txtRef = createRef()

  handleClick = () => {
    // 文本框对应的 DOM 元素
    // console.log(this.txtRef.current)

    // 文本框的值：
    console.log(this.txtRef.current.value)
  }

  render() {
    return (
      <div>
        <input ref={this.txtRef} />
        <button onClick={handleClick}>获取文本框的值</button>
      </div>
    )
  }
}

更多关于受控组件和非受控可以看:【React】知识点归纳：受控组件与非受控组件区别_Dream_Lee的博客-CSDN博客