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.受控组件的优势
受控组件的数据源只有一个有利于复杂组件的维护。