React学习笔记19-受控组件

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 元素，或者通过其他

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