Skip to main content

[note] Ant Design

安裝與使用#

安裝 Ant Design#

$ npm install antd --save

設定 webpack 內的 babel-loader#

$ npm install babel-plugin-import --save-dev

在這裡設定 plugins 可以讓我們在使用到該元件的時候,Babel 會自動載入相關的 CSS :

// webpack.config.js
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: [
['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], // `style: true` for less
],
},
},
},
];

如果沒有在 webpack babel-loader 這裡設定的話,需要手動載入 CSS:

import 'antd/dist/antd.css'; // 載入所有 CSS
import 'antd/lib/date-picker/style/css'; // 載入特定模組的 CSS

使用 AntdDesign#

import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);

Form#

  • Form.create():需要先使用 Form.create()(<Component>) 才能使用 this.props.form 取得 Antd 提供的 Form 方法。
  • form.getFieldDecorator:當欄位有使用 getFieldDecorator() 做雙向綁定的話,資料就會被存在 Form 元件的狀態中,不需要再另外存一份在 state 中。
  • options.initialValue:一般設定欄位預設值的方式。
  • Form.create({ mapPropsToFields }):當有使用 mapPropsToFields 並搭配 Form.createFormField 方法時,不需要定義 options.initialValue 即會自動將欄位的資料帶入。

通常 mapPropsToFieldsonFieldsChange 會搭配 Redux 使用,可參考 rc-form@2.4.3

options.initialValue 和 mapPropsToFields#

  • 若有使用 mapPropsToFields 則在 getFieldDecorator 即可不去定義 options.initialValue
  • 當「沒有」使用 mapPropsToFields 時,則需要在 getFieldDecoratoroptions.initialValue 中將 props 的資料傳入。
  • 如果「同時」使用了 mapPropsToFieldsoptions.initialValue 則會以 mapPropsToFieldsForm.createFormField 的值為主。

其他#

按鈕動畫(Button Animation)#

在 Ant 中按下按鈕(Button)後會出現光暈的效果,這樣的效果是來自 .ant-click-animating-node[ant-click-animating-without-extra-node]:after 這些 class,以及 fadeEffect 的動畫:

[ant-click-animating],
[ant-click-animating-without-extra-node] {
position: relative;
}
[ant-click-animating-without-extra-node]:after,
.ant-click-animating-node {
content: '';
position: absolute;
top: -1px;
left: -1px;
bottom: -1px;
right: -1px;
border-radius: inherit;
border: 0 solid #00d252;
opacity: 0.2;
animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1), waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
animation-fill-mode: forwards;
display: block;
pointer-events: none;
}
@keyframes waveEffect {
100% {
top: -6px;
left: -6px;
bottom: -6px;
right: -6px;
border-width: 6px;
}
}
@keyframes fadeEffect {
100% {
opacity: 0;
}
}

常見錯誤說明#

Form#

You cannot set a form field before rendering a field associated with the value#

錯誤訊息:You cannot set a form field before rendering a field associated with the value.

錯誤原因:要 setFiledValues 的欄位,並沒有先在 render 中用 getFieldDecorator 定義該欄位名稱,有可能是因為打錯字等原因。

Last updated on