1.29 什么是受控组件与非受控组件

一、受控组件与非受控组件

1. 通过props控制的组件成为受控组件；而通过state控制的组件称为非受控组件

2. React表单内置了受控组件的行为：

   1. value + onChange：适合输入框，下拉菜单

   2. checked + onChange

   3. 示例

      import { useState } from 'react'
      
      function App() {
        const [inp, setInp] = useState('')
        const [checked, setChecked] = useState(true)
      
        const inpChange = (e) => {
          setInp(e.target.value)
        }
      
        const checkedChange = () => {
          setChecked(!checked)
        }
      
        return (
          <>
            <div>Default Template</div>
            <br />
            <input type="text" value={inp} onChange={inpChange} />
            <br />
            <input type="checkbox" checked={checked} onChange={checkedChange} />
          </>
        )
      }
      
      export default App
      

      只有按照上述方案操作才可以实现输入框等内容的实时回显