在React中，受控組件和非受控組件是兩種處理表單輸入的方式。
1. 受控組件
受控組件是指由React控制并維護(hù)其狀態(tài)的組件。這意味著表單輸入的值由組件的state屬性來管理，每次值發(fā)生變化時(shí)都會(huì)更新state。要更新受控組件的值，需要通過onChange事件處理函數(shù)來更新state，然后再將新的值傳遞給組件。使用受控組件時(shí)，表單的值始終與組件的狀態(tài)同步，可以方便地對(duì)輸入進(jìn)行驗(yàn)證或操作。
例如，以下代碼演示了一個(gè)受控組件的例子：
import React, { useState } from 'react';
const ControlledComponent = () => {
const [inputValue, setInputValue] = useState('');
const handleChange = (event) => {
setInputValue(event.target.value);
};
return (
<input type="text" value={inputValue} onChange={handleChange} />
);
};
你可以將 React 中的受控組件與 Vue 中的表單的 v-model 進(jìn)行類比。在 React 中，受控組件通過將表單元素的值綁定到組件的狀態(tài)（state）來實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。當(dāng)用戶輸入內(nèi)容時(shí)，React 會(huì)更新組件的狀態(tài)，從而更新表單元素的值。這樣，你可以輕松地對(duì)表單的值進(jìn)行控制和處理。
類似地，Vue 中的表單的 v-model 也實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定。通過將組件的數(shù)據(jù)綁定到表單元素的值，當(dāng)用戶輸入內(nèi)容時(shí)，Vue 會(huì)自動(dòng)更新組件的數(shù)據(jù)，反之亦然。
因此，你可以將 React 中的受控組件與 Vue 中的表單的 v-model 視為在不同框架中實(shí)現(xiàn)表單的雙向綁定的相似機(jī)制。
2. 非受控組件
非受控組件則將控制權(quán)交給了DOM本身，并不維護(hù)其輸入值的狀態(tài)。通過使用ref屬性來訪問DOM節(jié)點(diǎn)，可以在需要時(shí)獲取表單輸入的當(dāng)前值。這樣，無論用戶輸入如何，React并不會(huì)追蹤或控制輸入的值。非受控組件通常更適用于簡單的表單輸入或?qū)?shí)時(shí)輸入不進(jìn)行表單驗(yàn)證的情況。
以下是一個(gè)非受控組件的示例：文章來源：http://www.zghlxwxcb.cn/news/detail-741407.html
import React, { useRef } from 'react';
const UncontrolledComponent = () => {
const inputRef = useRef();
const handleClick = () => {
console.log(inputRef.current.value);
};
return (
<div>
<input type="text" ref={inputRef} />
<button onClick={handleClick}>Submit</button>
</div>
);
};
需要注意的是，受控組件和非受控組件各有其適用場景，具體使用哪種方式取決于項(xiàng)目需求和個(gè)人偏好。文章來源地址http://www.zghlxwxcb.cn/news/detail-741407.html
到了這里，關(guān)于react中的受控組件和非受控組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
