鍍金池/ 問答/人工智能  HTML/ 關于antd樹形控件點擊樹節(jié)點不能收縮問題

關于antd樹形控件點擊樹節(jié)點不能收縮問題


// expandedKeys,selectedKeys 使用了這兩個方法，發(fā)現樹形結構點擊不能收縮，必須要把父級目錄parent 1-0下的第二個leaf點擊讓背景色消失才會自動收縮，這樣自動收縮也是不對的，即使點擊讓背景色消失也不能自動收縮，直到用戶點擊父級parent 1-0才能收縮，這才正常，求解答

圖片描述

 checkedKeys = () => {
    this.setState({ checkedKey: ['0-0-0-1','0-0-1-0'] });
  }
  onSelect = (selectedKeys, info) => {
    this.setState({ checkedKey: selectedKeys });
  }
  onExpands = (selectedKeys, info) => {
    this.setState({ checkedKey: selectedKeys });
  }
  render() {
    return (
      <div>
        <Tree
          multiple={true}
          expandedKeys={this.state.checkedKey}
          selectedKeys={this.state.checkedKey}
          onSelect={this.onSelect}
          onExpand={this.onExpands}
        >
          <TreeNode title="parent 1" key="0-0">
            <TreeNode title="parent 1-0" key="0-0-0">
              <TreeNode title="leaf" key="0-0-0-0" />
              <TreeNode title="leaf" key="0-0-0-1" />
            </TreeNode>
            <TreeNode title="parent 1-1" key="0-0-1">
              <TreeNode title="sss" key="0-0-1-0" />
            </TreeNode>
          </TreeNode>
        </Tree>
        <button onClick={this.checkedKeys}>給復選框值</button>
      </div>
    );
  }
回答
編輯回答
壞脾滊

你把選擇與展開混淆了。
1樓回答正解！

2017年3月19日 08:20
編輯回答
尛曖昧
  render() {
    return (
      <div>
        <Tree
          multiple={true}
          expandedKeys={this.state.expandKey || []}// （受控）展開指定的樹節(jié)點
          selectedKeys={this.state.checkedKey || []}// （受控）設置選中的樹節(jié)點
          onSelect={this.onSelect}// 點擊樹節(jié)點觸發(fā)
          onExpand={this.onExpands}// 展開/收起節(jié)點時觸發(fā)
        >
          <TreeNode title="parent 1" key="0-0">
            <TreeNode title="parent 1-0" key="0-0-0">
              <TreeNode title="leaf" key="0-0-0-0" />
              <TreeNode title="leaf" key="0-0-0-1" />
            </TreeNode>
            <TreeNode title="parent 1-1" key="0-0-1">
              <TreeNode title="sss" key="0-0-1-0" />
            </TreeNode>
          </TreeNode>
        </Tree>
        <button onClick={this.checkedKeys}>給復選框值</button>
      </div>
    );
  }
  checkedKeys = () => {
    this.setState({ expandKey: ['0-0-0','0-0-0-1','0-0-1-0'],checkedKey: ['0-0-0','0-0-0-1','0-0-1-0'] });
  }
  onSelect = (onSelect, info) => {
    this.setState({ checkedKey: onSelect });
  }
  onExpands = (onExpands, info) => {
    this.setState({ expandKey: onExpands });
  }
2017年9月2日 13:04
編輯回答
淺時光
 onExpands = (selectedKeys, info) => {
    this.setState({ checkedKey: selectedKeys });
  }

這里寫錯了，checkedKey和expandKey用兩個變量來存，他們是兩個東西

2018年4月7日 17:48