react修改状态小案例

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 = () => {
    // 直接修改state中属性
    this.setState({
      name: '小花'
    })
  }

  hClick2 = () => {
    // 修改state中对象的属性
    this.setState({
      info: { ...this.state.info, age: 20 }
    })
  }

  hClick3 = () => {
    // 修改state中数组中对象的属性
    const newAssets = [...this.state.assets]
    newAssets[0].name = '电脑'
    this.setState({
      assets: newAssets
    })
  }

  hClick4 = () => {
    // 在state中的数组属性中添加新值
    this.setState({
      skill: [...this.state.skill, 'angular']
    })
  }

  hClick5 = () => {
    // 删除state中数组中的id为2的对象
    this.setState({
      assets: this.state.assets.filter((item) => item.id !== 2)
    })
  }

  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改成20ss
                  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>
    app
    {/* 2.使用组件 */}
    <HelloReact />
  </div>
)

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