antd是螞蟻金服推出的ui元件庫,給我們在react專案開發中提供了大大的便利。但在使用的過程中,或多或少的會遇到一些問題,畢竟,用的是別人的東西,就得遵守別人的規則嘛!官方文件:
通過官方文件我們可以知道,很多元件如datepicker、modal等等預設的文字都是英文。如果是輸入框的提示文字我們可以通過元件的placeholder
屬性來自定義;如果是模態框底部按鈕的文字我們也可以通過模態框元件提供的canceltext
、oktext
等屬性來自定義,那如果是時間外掛程式彈出的日曆選擇裡面的標題日期呢?又或是穿梭框的項數總計?諸如此類…
其實,我們只需要在需要中文化的元件外面包裹元件元件即可。
**如下(以datepicker為例,其他元件用法相同):
import react,
from
'react'
;import
from
'antd'
;import zh_cn from
'antd/lib/locale-provider/zh_cn'
;import
'moment/locale/zh-cn'
;class
mycomponent
extends
component
>
>
<
/localeprovider>
<
/div>)}
}
reactdom.
render
(>
>
<
/localeprovider>
, document.
getelementbyid
('root'))
;
如涉及到其他語言,詳情參考官方說明文件:
當我們使用antd的表單元件時,不能使用傳統的方式獲取輸入框或者其他表單元件的值了。這是,我們需要借助官方提供的getfielddecorator
來獲取表單的值。要得到getfielddecorator
的前提必須要先使用form.create()
建立表單。
**如下:
import react,
from
'react'
;import
from
'antd'
;const formitem = form.item;
class
myform
extends
component
, sm:,}
,,sm:,}
,};return formitemlayout;
}render()
=this
.props.form;
return
(>
antd在React專案中的使用
antd樣式的按需引入 自定義主題 遇到的問題 解決辦法 yarn add antdimport react,from react import from antd import antd dist antd.css 引入樣式 配置具體的修改規則 const require customize cr...
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...