React中的受控和非受控组件
# React 中的受控和非受控组件
# 受控组件
当表单控件的状态和 react 中的 state 关联起来并且只能通过 setState()来更新,渲染表单的 react 组件还控制着用户输入过程中表单发生的操作,被 React 以这种方式控制取值的表单输入元素就叫做受控组件。
const App: React.FC = () => {
const [state, setState] = useState('')
return (
<>
<p>你输入的值:{state}</p>
<input
type="text"
value={state}
onChange={(e) => setState(e.target.value)}
/>
</>
)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 非受控组件
非受控组件就是表单的控件的状态还是存在于 dom 中,react 通过 ref 获取表单控件的 dom 元素来间接地获取控件的 value 值。
const App: React.FC = () => {
const inputRef = useRef < HTMLInputElement > null
const handleClick = () => {
console.log('你输入的值:' + inputRef.current?.value)
}
return (
<>
<input type="text" ref={inputRef} />
<button onClick={handleClick}>点击</button>
</>
)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 总结
- React 中的组件分为受控组件和非受控组件
- 受控组件的两个要点:
- 组件的 value 属性与 React 中的状态绑定
- 组件内声明了 onChange 事件处理 value 的变化
- 非受控组件更像是传统的 HTML 表单元素,数据存储在 DOM 中,而不是组件内部,获取数据的方式是通过 ref 引用
编辑 (opens new window)
上次更新: 2022/09/22, 14:19:57