跳至主要内容

[note] Ant Design

內容已過時

本文涵蓋的是 Ant Design v3 的 API（如 Form.create()、getFieldDecorator），這些 API 在 Ant Design v4（2020 年 2 月）中已被完全移除。目前最新版為 v5，使用 Form.useForm() Hook 和 CSS-in-JS（不再需要手動引入 CSS 或使用 babel-plugin-import）。

安裝與使用​

安裝 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';

const root = ReactDOM.createRoot(mountNode);
root.render(<DatePicker />);

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 即會自動將欄位的資料帶入。

通常 mapPropsToFields 和 onFieldsChange 會搭配 Redux 使用，可參考 rc-form@2.4.3。

options.initialValue 和 mapPropsToFields​

  • 若有使用 mapPropsToFields 則在 getFieldDecorator 即可不去定義 options.initialValue。
  • 當「沒有」使用 mapPropsToFields 時，則需要在 getFieldDecorator 中 options.initialValue 中將 props 的資料傳入。
  • 如果「同時」使用了 mapPropsToFields 和 options.initialValue 則會以 mapPropsToFields 中 Form.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 定義該欄位名稱，有可能是因為打錯字等原因。