溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Ant Design實現(xiàn)可編輯Tree的操作

發(fā)布時間：2020-11-02 15:33:07 來源：億速云 閱讀：851 作者：Leah 欄目：開發(fā)技術(shù)

今天就跟大家聊聊有關(guān)Ant Design實現(xiàn)可編輯Tree的操作，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

一個節(jié)點的數(shù)據(jù)結(jié)構(gòu)應該是

{
  value: 'Root', // 顯示的信息
  defaultValue: 'Root', // 當某一節(jié)點進入編輯狀態(tài)，然后點擊close按鈕，節(jié)點的信息應該恢復原始狀態(tài)，
  key: '0-1', // 節(jié)點的Key，全局唯一
  parentKey: '0', // 父節(jié)點的Key
  isEditable: false // 是否處于可編輯狀態(tài)
  children:[] // 子節(jié)點
}

通過數(shù)據(jù)結(jié)構(gòu)組裝TreeNode的代碼如下：

data= [
   {
    value: 'Root',
    defaultValue: 'Root',
    key: '0-1',
    parentKey: '0',
    isEditable: false
   }
  ];
  
  state={
    data: this.data
  }
 
renderTreeNodes = data => data.map((item) => {
  if (item.isEditable) { // 編輯狀態(tài)下
   item.title = (
    <div>
     <input value={item.value}
      onChange={(e) => this.onChange(e, item.key)}/>
     <Icon type='close' style={{marginLeft:10}} onClick={() => this.onClose(item.key, item.defaultValue)}/>
     <Icon type='check' style={{marginLeft:10}} onClick={() => this.onSave(item.key)}/>
    </div>
   );
  } else {
   item.title = (
    <div>
     <span>
      {item.value}
     </span>
     <Icon style={{ marginLeft: 10 }} type='edit' onClick={() => this.onEdit(item.key)} />
     <Icon style={{ marginLeft: 10 }} type='plus' onClick={() => this.onAdd(item.key)} />
     {item.parentKey === '0' &#63; null : (<Icon style={{ marginLeft: 10 }} type='minus' onClick={() => this.onDelete(item.key)} />)} // 根節(jié)點沒有刪除按鈕
    </div>
   )
  }
 
  if (item.children) {
   return (
    <TreeNode title={item.title} key={item.key} dataRef={item}>
     {this.renderTreeNodes(item.children)}
    </TreeNode>
   );
  }
 
  return <TreeNode {...item}/>;
 })
 
 ...
 // 渲染界面
 render() {
  return (
   <div>
    <Tree>
     {this.renderTreeNodes(this.state.data)}
    </Tree>
   </div>
  )
 }

之后所有的增刪修改等都是先修改data這個數(shù)組中的數(shù)據(jù)，然后使用this.setState({ data: this.data })更新界面，具體的看下代碼就成，很簡單。

最后優(yōu)化這個組件的時候，遇到一個比較坑的。本來想是當在某節(jié)點上增加子節(jié)點時，父節(jié)點自動展開，代碼邏輯上沒有問題，但是必須手動執(zhí)行過一次展開或者搜索的操作，所寫的邏輯才能生效。

后來沒辦法，只能在生命周期函數(shù)中DOM加載完畢后主動觸發(fā)下：

componentDidMount() {
  this.onExpand([]); // 手動觸發(fā)，否則會遇到第一次添加子節(jié)點不展開的Bug
 }

代碼放在GitHub上了，地址是 react-editable-tree，歡迎有同樣需要的小伙伴參考，star和fork 也是極好的。

補充知識：關(guān)于antd Select 限制選擇個數(shù)的解決方案

應用場景描述：

Select 被form 所包裹，且被getFieldDecorator修飾。所以值的改變應該通過form的setFieldsValue方法。

Select模式肯定會是multiple。且以最多三個值舉例。

解決思路如下：

1 起初是想在Select的onchange事件中判斷values的數(shù)量，數(shù)量大于三個的時候來重新setFieldsValue；且把最后的選項值替換成剛剛選擇的值。

后來發(fā)現(xiàn)setFieldsValue方法不起作用，Select的值會一直增加。后來想想可能是 setFieldsValue與onchange 沖突，通過setFieldsValue 無法改變onchange后的值。

2 最后通過重新查看文檔。發(fā)現(xiàn)還有一個方法可用，即 validator。驗證值，通過驗證所選值的數(shù)量是否大于三個，然后重新setFieldsValue ；發(fā)現(xiàn)此法可行。從而解決該疑難雜癥。

好，最后附上代碼供參考：

changeValues = (rule ,value , callback)=> {
　　const { setFieldsValue } = this.props.form ;
　　let newArr ;
　　if (value.length > 3){
　　　　newArr = [].concat(value.slice(0,2), value.slice(-1) ) ;
　　　　setFieldsValue({
　　　　"languages" : newArr ,
　　　　})
　　　　callback('最多選擇三種語言')
　　} else {
　　　　newArr = value ;
　　　　callback()
　　}
}
 
<FormItem>
{getFieldDecorator('languages', {
rules:[{required: true,message : '請選擇三種語言',
validator : changeValues
}],
validateTrigger : 'onChange',
})(
<Select mode='multiple' >
 
　　<Option key={1} value={1}>1</Option>
　　<Option key={2} value={2}>2</Option>
 　　<Option key={3} value={3}>3</Option>
　　<Option key={4} value={4}>4</Option>
　　<Option key={5} value={5}>5</Option>
</Select>
)}
</FormItem>

看完上述內(nèi)容，你們對Ant Design實現(xiàn)可編輯Tree的操作有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手