程序员书籍笔记 程序员书籍笔记
  • HTML
  • CSS
  • JavaScript
  • 前端知识
  • Vue
  • MarkDown
  • git
  • Node.js
  • Linux
  • 51单片机
  • 四级
  • 第一学期课程
  • 操作系统
  • 计算机网络
  • 数据结构
  • 计算机组成原理
  • HTML5
  • Electron
  • 日记便签
  • 前端导航
GitHub (opens new window)
  • HTML
  • CSS
  • JavaScript
  • 前端知识
  • Vue
  • MarkDown
  • git
  • Node.js
  • Linux
  • 51单片机
  • 四级
  • 第一学期课程
  • 操作系统
  • 计算机网络
  • 数据结构
  • 计算机组成原理
  • HTML5
  • Electron
  • 日记便签
  • 前端导航
GitHub (opens new window)
  • HTML

  • CSS

  • JavaScript

  • GO

  • 正则表达式

  • java

  • TypeScript

  • react

    • 组件
    • this指向
    • 受控组件
      • 受控组件
      • 基本概念
      • 多个受控组件封装
      • 非受控组件
      • 评论列表案例
    • 组件通信
    • 案例及同级组件通信
    • Props和插槽
    • 生命周期
    • 路由
    • 极客PC项目
    • 组件复用
    • hooks
    • hooks更多用法
    • Reudx
    • todo案例
    • react函数组件
    • 基本使用
  • 前端知识

  • jQuery

  • Python

  • C和C++

  • 前端和后端
  • react
yuadh
2022-08-02
目录

受控组件

# 受控组件

# 基本概念

  • HTML 中表单元素是可输入的,即表单用户并维护着自己的可变状态
  • 当时在 react 中,可变状态通常是保存在 state 中的,并且要求通过 setState 进行修改
  • react 中将 state 中的数据与表单元素的 value 值绑定到了一起, 由 state 值来控制表单元素的值
  • 受控组件:value 值受到了 react 控制的表单元素
render(){
    return (
    	<div>
        	<input
                type = "text"
                value = {this.state.msg}
                onChange = {this.handleChange}>
            </input>
        </div>
    )
}
handleChange = ()=>{
	this.setState({
        msg:e.target.value
    })                    
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 多个受控组件封装

除了文本类型外文字域、下拉框和复选框等都可以使用 react 的受控

handleChange = (e)=>{
    const {name,type,checked,value}  = e.target
    this.setState({
        [name]:type === 'checkbox'?checked:value
    })
}
1
2
3
4
5
6

注意: 此处使用到了 es6 的特性

在 es6 之前,属性的名字必须是指定的好的,属性的值可以是任意形式的表达式

在 es6 之后,属性名可以是任意形式的表达式,但是需要使用 [] 包裹

# 非受控组件

ref 使用步骤

  1. 通过 React.createRef() 创建一个 ref
  2. 通过 ref={this.xxxRef} 关联给某个 DOM 对象或者组件
  3. 通过 this.xxxRef.current 属性就可以获取到对应的 dom 元素
const textRef = React.reateRef()
render(){
    return (
    	<div>
            <input type="text" ref={this.textRef}>
        	<button
                onClick = {this.handle}>
            </button>
        </div>
    )
}
handle = ()=>{
	console.log(this.textRef.current.value)                 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 评论列表案例

  1. 展示评论列表功能
  2. 清空评论的功能
  3. 发表新的评论的功能
  4. 删除评论功能
  5. 没有更多评论的处理
import React from 'react'
import ReactDOM from 'react-dom'

/* 
  评论列表案例

  comments: [
    { id: 1, name: 'jack', content: '沙发!!!' },
    { id: 2, name: 'rose', content: '板凳~' },
    { id: 3, name: 'tom', content: '楼主好人' }
  ]
*/

import './index.css'

class App extends React.Component {
  // constructor() {
  //   super()
  // }

  state = {
    list: [
      { id: 1, name: 'y', comment: '代码练习太少了' },
      { id: 2, name: 'd', comment: '外包接单没法接' },
      { id: 3, name: 'h', comment: '写起东西无从下手' },
      { id: 4, name: 's', comment: '资源较少,没有经验' },
    ],
    user: '',
    content: '',
  }
  render() {
    return (
      <div className="app">
        <div>
          <input
            onChange={this.handleChange}
            className="user"
            name="user"
            type="text"
            placeholder="请输入评论人"
            value={this.state.user}
          />
          <br />
          <textarea
            onChange={this.handleChange}
            className="content"
            name="content"
            cols="30"
            rows="10"
            value={this.state.content}
            placeholder="请输入评论内容"
          />
          <br />
          <button onClick={this.sendComment}>发表评论</button>
          <button onClick={this.clearComment}>清空评论</button>
        </div>
        {this.state.list.length !== 0 ? (
          <ul>
            {this.state.list.map((item) => {
              return (
                <li key={item.id}>
                  <h3>评论人:{item.name}</h3>
                  <p>评论内容:{item.comment}</p>
                  <button
                    onClick={() => {
                      this.deleteComment(item.id)
                    }}
                  >
                    删除评论
                  </button>
                </li>
              )
            })}
          </ul>
        ) : (
          <div className="no-comment">暂无评论,快去评论吧~</div>
        )}
      </div>
    )
  }
  handleChange = (e) => {
    const { name, value } = e.target
    this.setState({
      [name]: value,
    })
  }
  clearComment = () => {
    this.setState({
      list: [],
    })
  }
  deleteComment = (id) => {
    const newList = this.state.list.filter((item) => item.id !== id)
    this.setState({
      list: newList,
    })
  }
  sendComment = () => {
    if (this.state.user.length === 0 || this.state.content.length === 0) {
      alert('信息不完整')
      return
    }
    const add = {
      id: Date.now(),
      name: this.state.user,
      comment: this.state.content,
    }
    this.setState({
      list: [add, ...this.state.list],
      user: '',
      content: '',
    })
  }
}

// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
编辑 (opens new window)
上次更新: 2023/02/07, 14:51:48
this指向
组件通信

← this指向 组件通信→

Theme by Vdoing | Copyright © 2021-2023 yuadh
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×