以下代碼是用<Form></Form>
包裹的子組件中的render部分的代碼:
可以看到Input.TextArea
被<div>
包裹住了,這會導致無法被Form表單識別并抓取,因為Form默認只允許放一個子元素。
<div className={styles.textAreaWrap}><Form.Item name={formItemOpts.formItemName} noStyle rules={formItemOpts.rules}><div style={{ marginTop: 8 }}><Input.TextArea ref={cRef} {...rest} style={{ paddingBottom: 24, ...rest?.style }} /></div></Form.Item>
</div>
這時候我們應該增加一個noStyle
屬性給Form.Item
標簽,并且移動div
到Form.Item
標簽之外,noStyle
的效果就是可以忽略Form.Item
的樣式,起到和內部放置div一樣的效果,可以認為noStyle
=<></>
<div className={styles.textAreaWrap}><div style={{ marginTop: 8 }}><Form.Item name={formItemOpts.formItemName} noStyle rules={formItemOpts.rules}><Input.TextArea ref={cRef} {...rest} style={{ paddingBottom: 24, ...rest?.style }} /></Form.Item></div>
</div>