react使用antd定製個性化form元件

antd元件庫已經非常的豐富了，對於大多數需求來說都可以滿足，but，總有一些需求是那麼的「奇葩」，現有元件無法實現，只能極不情願地造乙個出來了。

原系統介面是這樣的：

根據新需求最終實現出來的效果是這樣的：

新元件具備的功能：

先貼上**：

import react from 'react';

import from 'antd';
import styles from '../../style.css';
const formitem = form.item;
const option = select.option;
const
cursorposition = (element) => else
if (element.selectionstart || element.selectionstart === '0') //支援firefox
return caretpos;
}class
specialarea
extends
react.component 
} componentwillreceiveprops(nextprops) );
}} componentdidupdate(prevprops, prevstate) 
} onareachange = (e) => );
} onselect = (val) => = this.state;
if (value) );
} else );
}} onblur = (e) => );
} triggerchange = (changedvalue) => 
} render() ,,,
,,];const optiondoms = ;
optiondata.map(item=> );
return optiondoms;
});return (
14} offset=>
"-- 請選擇 --" onselect=>
"textarea" rows= ref= value= onchange= onblur= />)}}
export
default specialarea;

form表單獲取動態輸入的值

這個功能實現需要依賴最重要的乙個方法：this.props.onchange,該方法將輸入的值注入props，此時這個元件就可以通過getfielddecorator()函式包裝進form。

業務流程：input元件通過onchange()獲取輸入的值value，呼叫triggerchange()方法執行this.props.onchange()，將value注入props，props改變引發元件重新渲染，在componentwillreceiveprops()中將value賦值給input元件。

點選新增資料列後元件獲取焦點

要讓input標籤獲取焦點需要訪問真實的dom節點，在react宣告週期中，componentdidupdate()可以滿足需求。

select元件通過onselect()方法將選中值插入value中，然後呼叫triggerchange()更新props，元件重新渲染後通過componentdidupdate()來判斷更新前後的state.value值是否改變，如果改變則input獲取焦點。

另

constructor

(props)
}

React中使用Antd元件

antd的高階配置 antd的自定義主題 在react專案中進行安裝yarn add antd或者npm i antd安裝 import react,from react import from antd 引入按鈕 import antd dist antd.css 還需要引入css樣式 目的是不用...

React使用antd元件Radio

div style radio group defaultvalue a buttonstyle solid radio button value a hangzhou radio.button radio button value b shanghai radio.button radio.gro...

react 使用antd 按需載入

2.修改package.json package.json 的配置需要做如下修改 scripts babel plugin import 是乙個用於按需載入元件 和樣式的 babel 外掛程式 原理 現在我們嘗試安裝它並修改config overrides.js檔案。yarn add babel p...