fish 下使用完全受控控制点击父节点只展开不选中

tree-select.js

import { TreeSelect } from 'fish';

const TreeNode = TreeSelect.TreeNode;

class Demo extends React.Component {
  state = {
    value: undefined,
    expandedKeys: [],
  };

  onChange = value => {
    this.setState({ value });
  };

  onClickTreeNode = (e, key) => {
    // 阻止冒泡，触发默认展开
    e.stopPropagation();
    const { expandedKeys } = this.state
    if (this.state.expandedKeys.includes(key)) {
      const keys = expandedKeys.filter((item) => item !== key)
      this.setState({expandedKeys: [...keys]})
    } else {
      this.setState({expandedKeys: [...expandedKeys, key]})
    }
  }
  onTreeExpand = (expandedKeys) => {
    this.setState({expandedKeys: [...expandedKeys]})
  }
  render() {
    return (
      <TreeSelect
        style={{ width: 300 }}
        value={this.state.value}
        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
        placeholder="请选择"
        allowClear
        onChange={this.onChange}
        treeCheckStrictly
        treeExpandedKeys={this.state.expandedKeys}
        onTreeExpand={this.onTreeExpand}
      >
        <TreeNode value="父节点 1" selectable={false} key="0-1" title={<div onClick={(e) => { this.onClickTreeNode(e, '0-1') }}>父节点 0-1</div>} >
          <TreeNode value="父节点 1-0" title={<div onClick={(e) => { this.onClickTreeNode(e, '0-1-1') }}>父节点 1-0</div>} key="0-1-1">
            <TreeNode value="我的 叶节点" title="我的 叶节点" key="random" />
            <TreeNode value="你的 叶节点" title="你的 叶节点" key="random1" />
          </TreeNode>
          <TreeNode value="父节点 1-1" title={<div onClick={(e) => { this.onClickTreeNode(e, '1-1') }}>父节点 1-0</div>} key="1-1">
            <TreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} key="random3" />
          </TreeNode>
        </TreeNode>
      </TreeSelect>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);