溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關Ant Design實現可編輯Tree的操作，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
一個節點的數據結構應該是
{
value: 'Root', // 顯示的信息
defaultValue: 'Root', // 當某一節點進入編輯狀態，然后點擊close按鈕，節點的信息應該恢復原始狀態，
key: '0-1', // 節點的Key，全局唯一
parentKey: '0', // 父節點的Key
isEditable: false // 是否處于可編輯狀態
children:[] // 子節點
}通過數據結構組裝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) { // 編輯狀態下
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' ? null : (<Icon style={{ marginLeft: 10 }} type='minus' onClick={() => this.onDelete(item.key)} />)} // 根節點沒有刪除按鈕
</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這個數組中的數據，然后使用this.setState({ data: this.data })更新界面，具體的看下代碼就成，很簡單。
最后優化這個組件的時候，遇到一個比較坑的。本來想是當在某節點上增加子節點時，父節點自動展開，代碼邏輯上沒有問題，但是必須手動執行過一次展開或者搜索的操作，所寫的邏輯才能生效。
后來沒辦法，只能在生命周期函數中DOM加載完畢后主動觸發下：
componentDidMount() {
this.onExpand([]); // 手動觸發，否則會遇到第一次添加子節點不展開的Bug
}代碼放在GitHub上了，地址是 react-editable-tree，歡迎有同樣需要的小伙伴參考，star和fork 也是極好的。
補充知識：關于antd Select 限制選擇個數的解決方案
應用場景描述：
Select 被form 所包裹，且被getFieldDecorator修飾。所以值的改變應該通過form的setFieldsValue方法。
Select模式肯定會是multiple。且以最多三個值舉例。
解決思路如下：
1 起初是想在Select的onchange事件中判斷values的數量，數量大于三個的時候來重新setFieldsValue；且把最后的選項值替換成剛剛選擇的值。
后來發現setFieldsValue方法不起作用，Select的值會一直增加。后來想想可能是 setFieldsValue與onchange 沖突，通過setFieldsValue 無法改變onchange后的值。
2 最后通過重新查看文檔。發現還有一個方法可用，即 validator。驗證值，通過驗證所選值的數量是否大于三個，然后重新setFieldsValue ；發現此法可行。從而解決該疑難雜癥。
好，最后附上代碼供參考：
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>看完上述內容，你們對Ant Design實現可編輯Tree的操作有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
