React学习笔记19-受控组件

合集 - React学习记录(23)

1.React学习笔记01-React的基本认识2023-10-162.React学习笔记02-创建React项目2023-10-163.React学习笔记03-编写第一个react应用程序2023-10-164.React学习笔记04-JSX语法2023-10-175.React学习笔记05-类组件2023-10-196.React学习笔记06-函数式组件2023-10-197.React学习笔记07-组件嵌套2023-10-198.React学习笔记08- 组件的样式2023-10-199.React学习笔记09- 事件处理2023-10-2010.React学习笔记10- Ref的应用2023-10-2011.React学习笔记11-状态(state)2023-10-2012.React学习笔记12-循环渲染2023-10-2013.React学习笔记13-小案例toList(状态,状态维护,条件渲染渲染)2023-10-2114.React学习笔记14-dangerousSetinnerHtml指令2023-10-2115.React学习笔记15-setState同步异步问题2023-10-3116.React学习笔记16-属性props2023-11-0317.React学习笔记17-属性VS状态2023-11-0318.React学习笔记18-非受控组件2023-11-04

19.React学习笔记19-受控组件2023-11-04

20.React学习笔记20-父子通信(子传父)2023-11-0821.React学习笔记21-非父子通信(状态提升)2023-11-0822.React学习笔记22-订阅发布模式2023-11-0823.React学习笔记23-非父子通信(订阅发布模式)2023-11-08

收起

1.受控组件的定义

React组件的数据渲染是否被调用者传递的 props 完全控制，完全控制则为受控组件，否则非受控组件。即React 的 state 成为组件的唯一数据源。

 

下面用一个小案例来演示，案例中todolist组件的唯一数据源就是State，todolist组件就是一个受控组件

import React, { Component } from 'react'
import "../01-base/css/01-index.css"
export default class App extends Component {
    constructor() {
        super()
        this.state = {
            list: [],
            todotext: ''

        }
    }
    render() {
        return (
            <div>
                <input type="text" value={this.state.todotext} onChange={
                    (e) => {
                        this.setState({
                            todotext: e.target.value
                        })
                    }
                } />
                <button onClick={
                    () => {
                        const newlist = [...this.state.list]
                        newlist.push({ todotext: this.state.todotext, check: false })
                        this.setState({
                            list: newlist,
                            todotext: ''
                        })

                    }
                }>add</button>
                <ul>
                    {this.state.list.map((item, index) => {
                        return <li key={index}>
                            <input type="checkbox" checked={item.check} onChange={
                                () => {
                                    this.handlerCheck(index)
                                }
                            } />
                            <span style={
                                { textDecoration: item.check && "line-through" }
                            }>
                                {item.todotext}
                            </span>

                            {item.check && <span>完成</span>}
                            <button onClick={
                                (e) => {
                                    console.log(e)
                                    const newlist = this.state.list
                                    newlist.splice(index, 1)
                                    this.setState({
                                        list: newlist
                                    })
                                }
                            }>删除</button></li>
                    })}
                </ul>
                <div className={this.state.list.length ? 'hidden' : ""}>暂无代办事项</div>
            </div>
        )
    }
    handlerCheck(index) {
        let newlist = [...this.state.list]
        newlist[index].check = !newlist[index].check
        this.setState({
            list: newlist
        })
    }
}

2.受控组件的优势

受控组件的数据源只有一个有利于复杂组件的维护。

3.受控组件的劣势

对于受控组件来说，输入的值始终由 React 的 state 驱动。你也可以将 value 传递给其他 UI 元素，或者通过其他

事件处理函数重置，但这意味着你需要编写更多的代码。