AntDesign的可编辑Tree的实现操作

{
  value: 'Root', // 显示的信息
  defaultValue: 'Root', // 当某一节点进入编辑状态，然后点击close按钮，节点的信息应该恢复原始状态，
  key: '0-1', // 节点的Key，全局唯一
  parentKey: '0', // 父节点的Key
  isEditable: false // 是否处于可编辑状态
  children:[] // 子节点
}

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 = (
    

      this.onChange(e, item.key)}/>
      this.onClose(item.key, item.defaultValue)}/>
      this.onSave(item.key)}/>
    
   );
  } else {
   item.title = (
    

     
      {item.value}
     
      this.onEdit(item.key)} />
      this.onAdd(item.key)} />
     {item.parentKey === '0' &＃63; null : ( this.onDelete(item.key)} />)} // 根节点没有删除按钮
    
   )
  }
 
  if (item.children) {
   return (
    
     {this.renderTreeNodes(item.children)}
    
   );
  }
 
  return ;
 })
 
 ...
 // 渲染界面
 render() {
  return (
   

    
     {this.renderTreeNodes(this.state.data)}
    
   
  )
 }

componentDidMount() {
  this.onExpand([]); // 手动触发，否则会遇到第一次添加子节点不展开的Bug
 }

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()
　　}
}
 

{getFieldDecorator('languages', {
rules:[{required: true,message : '请选择三种语言',
validator : changeValues
}],
validateTrigger : 'onChange',
})(

 
　　1
　　2
 　　3
　　4
　　5

)}