antd對于form中輸入控件的抽象十分簡單，只要能接收value和onChange屬性的組件都可以成為Form.Item的子組件，為Form對應(yīng)的字段提供值。對于輸入控件的抽象我認為這已經(jīng)達到了極致，事件（onChange）產(chǎn)生值（value）。事件向上，值向下，完全符合React哲學(xué)。

如何實現(xiàn)一個標準的輸入組件？

對于輸入組件首先需要具備接收value和onChange屬性的能力，這兩個屬性被提供的情況下這個組件被稱為受控組件，它受到父組件控制，狀態(tài)來自父組件。當(dāng)父組件沒有提供value的情況下該組件是非受控組件，有自己的狀態(tài)。

是否受控主要取決于value屬性是否提供，因為value決定了組件當(dāng)前的狀態(tài)，當(dāng)前狀態(tài)被父組件控制，所以稱之為受控組件。

輸入組件的狀態(tài)是會改變的，最常見的方式就是來自用戶行為，例如在input中輸入內(nèi)容，該組件的狀態(tài)(value)就會改變。

因為組件可以作為非受控組件，所以組件自身有innerValue和setInnerValue用于展示和響應(yīng)用戶輸入。

如果父組件沒有提供value

組件使用自身的setInnerValue響應(yīng)用戶輸入，改變自身狀態(tài)innerValue

如果父組件提供onChange，在setInnerValue同時觸發(fā)onChange事件通知父組件

如果父組件提供了value，組件失去了決定自身狀態(tài)的能力（自身不會直接響應(yīng)用戶輸入）

如果父組件提供onChange函數(shù)，則使用該函數(shù)響應(yīng)用戶輸入

組件自身的setInnerValue不會響應(yīng)用戶輸入（setInnerValue的作用是修改innerValue，因為有父組件的value，innerValue會響應(yīng)value的變化，所以setInnerValue不應(yīng)該直接修改innerValue導(dǎo)致其和value不一致）

function Input (props) {const [innerValue, setInnerValue] = useState(props.value);useEffect(() => {if ('value' in props) setInnerValue(props.value)}, [props.value])function handleChange (ev) {if (!('value' in props)) {setInnerValue(ev.target.value)}props.onChange?.(ev.target.value)}return <input value={innerValue} onChange={handleChange} /> }

總結(jié)

以上是生活随笔為你收集整理的【antd】输入控件的思想的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。