Ant Design元件庫在React中的使用方法和問題總結

1. 彈窗銷毀後再打開，原來的值仍存在，如何銷毀彈窗内容？

解決： 加

destroyOnClose

 屬性，關閉時銷毀子元素。再次打開内容就清空了~

<Modal
      title="新增對賬流水"
      visible={visible}
      onOk={() => {
        formRef.current.handleSubmit();
      }}
      onCancel={onClose}
      okText="确認"
      cancelText="取消"
      width={800}
      destroyOnClose // 關閉時銷毀子元素
   >
      

如果是使用antd中的form，上述方法不起效時，将form重置：

form.resetFields(); // hooks中
 或者
 this.props.form.resetFields(); // class中
 this.formRef.current?.resetFields(); // class中

      

2. 在Select元件options中找到目标項的value。

通常下拉的結構是：

options = [ { id:1,name:'zhangsan' },...]
<Select
    style={{ width: '100%' }}
    placeholder="請選擇"
    allowClear
    disabled={!!detailData?.id}
 >
   {options?.map(item => (
    <Option value={item.id} key={item.name}>
      {item.name}
        </Option>
  ))}
  </Select>      

findName=(val,options)=>{
const targetOption = options.find(item=> item.value=>val);
return targetOption.name;
}      

3.React學習之antd中讀取與設定表單值

1.antd基礎元件用法

const {
   form: { getFieldDecorator },
  } = this.props;
<FormItem label="開始卡号" {...formLayout}>
  {getFieldDecorator('startNumber', {
        rules: [{ required: true, message: '請輸入開始卡号' }],
   initialValue: record && record.startNumber ? record.startNumber : '',
  })(<Input placeholder="請輸入開始卡号" style={{ width: '100%' }} />)}
</FormItem>
// 擷取form表單的值
form.validateFields((err, fieldsValue) => {
      if (err) return;
      console.log("fieldsValue",fieldsValue)
 });      

<Form  ref={this.formRef}>
   <FormItem label="摘要：" name="remark">
     <Input placeholder="請輸入摘要" style={{ width: '100%' }} allowClear />
   </FormItem>
 </Form>
// 設定值
this.formRef.current?.setFieldsValue({
    remark: 'XXX'),
});
// 擷取值
const value = this.formRef.current?.getFieldValue();      

2.自定義元件用法

// 父元件
<FormItem
  label=""
  {...bigInputLayout}
  name="tagContent"
  initialValue={{ items: [''], checkedItems: [], checkedTexts: [] }}
  valuePropName="tagContent"
  >
    <PriceTagContent // 自定義元件
  getPriceTagRef={(ref) => {
    this.priceTagRef = ref;
  }} 
  />
</FormItem>
// 子元件
addItemList=()=>{
  // 表單自定義子元件會加入onchange方法
  const { onChange } = this.props;
  const newCheckedTexts = [...checkedTexts];
  const item = [];
  const checkedItems = [];
  // 通過onchange方法更新父元件表單中的tagContent
  onChange({ items: item, checkedTexts: newCheckedTexts, checkedItems });  
}
<Input
  allowClear
  defaultValue={record.text}
  value={record?.text}
  // disabled={isDiss}
  onChange={(e) => {
    this.addItemList(record, e.target.value);
  }}
/>
      

4. Upload上傳檔案（重要）！

在Upload元件中經常用的就是受控的顯示和上傳。 我經常遇到的是這種情況：完全受控元件。 這樣一定要記得：

1. 設定

   fileList

   屬性。它決定了檔案清單預設顯示什麼，以及上傳後顯示什麼！

2. onChange

   方法的其中兩個重要且常用的參數：file、fileList。參數解釋如下：

file：目前操作的檔案對象。

{
   uid: 'uid',      // 檔案唯一辨別，建議設定為負數，防止和内部産生的 id 沖突
   name: 'xx.png'   // 檔案名
   status: 'done', // 狀态有：uploading done error removed，被 beforeUpload 攔截的檔案沒有 status 屬性
   response: '{"status": "success"}', // 服務端響應内容
   linkProps: '{"download": "image"}', // 下載下傳連結額外的 HTML 屬性
}
fileList： 目前的檔案清單。
      

render() {
    const props = {
      action: 'https://xxxxx.com',
      onChange: ({ file, fileList})=>{...},
      multiple: true,
    };
    return (
      <Upload {...props} fileList={this.state.fileList}>
        <Button icon={<UploadOutlined />}>Upload</Button>
      </Upload>
    );
  }
      

props

就是檔案上傳的各種屬性，不熟的話要自己點連結看官網。 API參考：

Ant Design 的 Upload

5. Tab頁切換，資料沒重新整理？

場景：兩個Tab頁，每個裡面都有表格，切換Tab，給Table指派DataSource時，資料正确但頁面未重新整理。 我的Tab内容沒有抽出元件，在一個檔案中寫的。原因： React需要唯一識别符，沒有唯一辨別符。解決：給每一個Table加key；将Tab的内容抽為子元件。