Ant Design 의 편집 가능 한 Tree 구현 작업

머리말
최근 Ant Design 으로 배경 을 쓰 고 있 습 니 다.부 노드 를 동적 으로 증감 하고 편집 할 수 있 는 Tree 가 필요 합 니 다.GitHub 에서 한 바퀴 돌 았 는데,쓰기 좋 고 적당 한 것 이 없 었 다.아예 Ant Design 의 Tree 구성 요 소 를 기반 으로 쓰 십시오.
실현 효 과 는 다음 과 같다.
하위 노드 증가 가능
하위 노드 삭제 가능
하위 노드 정보 편집 가능
정보 편집 취소 가능
구체 적 인 효과 도 는 다음 과 같다.

주요 한 것 은 TreeNode 의 title 속성 을 빌 리 는 것 입 니 다.그 유형 은 string|ReactNode 입 니 다.
본문
분석 을 통 해 한 노드 의 데이터 구 조 는

{
  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 의 setFields Value 방법 을 통 해 이 루어 져 야 합 니 다.
셀 렉 트 모드 는 틀림없이 multiple 일 것 이다.그리고 최대 세 개의 값 으로 예 를 들 면.
해결 방향 은 다음 과 같다.
1.처음에는 Select 의 onchange 이벤트 에서 values 의 수량 을 판단 하고 수량 이 세 개 이상 일 때 Fields Value 를 다시 설정 하려 고 했 습 니 다.마지막 옵션 값 을 방금 선택 한 값 으로 바 꿉 니 다.
나중에 setFields Value 방법 이 작 동 하지 않 고 Select 의 값 이 계속 증가 하 는 것 을 발견 했다.나중에 생각해 보 니 set Fields Value 와 onchange 가 충돌 할 수 있 습 니 다.set Fields Value 를 통 해 onchange 후의 값 을 바 꿀 수 없습니다.
2 마지막 으로 문 서 를 다시 봅 니 다.vaidator 를 사용 할 수 있 는 방법 이 하나 더 있 습 니 다.검증 값 은 선택 한 값 의 수량 이 세 개 이상 인지 검증 한 다음 에 Fields Value 를 다시 설정 합 니 다.이 방법 이 실행 가능 하 다 는 것 을 발견 하 다.이 난치병 을 해결 할 수 있다.
자,마지막 으로 참고 할 수 있 도록 코드 를 동봉 합 니 다.

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 의 실현 작업 은 바로 편집장 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 에 게 참고 가 되 고 많은 응원 부 탁 드 리 겠 습 니 다.