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

如何實現一個標準的輸入組件？

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

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

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

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

如果父組件沒有提供value

組件使用自身的setInnerValue響應用戶輸入，改變自身狀態innerValue

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

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

如果父組件提供onChange函數，則使用該函數響應用戶輸入

組件自身的setInnerValue不會響應用戶輸入（setInnerValue的作用是修改innerValue，因為有父組件的value，innerValue會響應value的變化，所以setInnerValue不應該直接修改innerValue導致其和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} /> }

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。