ReactJS如何实现DropdownTreeSelect选中后持续显示所选条目

问题描述 #

使用react-dropdown-tree-select开发时组件基础交互正常，但选中任意选项后，选择框内无法展示对应选中值，选中内容直接消失，预期效果为选中选项后选择框持续展示已选内容。

问题代码 #

<Row>
  <DropdownTreeSelect
    data={unitList}
    id='unit_id'
    mode='radioSelect'
    onChange={onChange}
    className="mdl-demo"
  />
</Row>

问题原因 #

react-dropdown-tree-select是受控组件，当前代码仅传入了onChange回调，没有将选中状态回传给组件，组件触发重渲染时没有拿到已绑定的选中值，就会出现选中内容清空的问题。

修复方案 #

• 第一步：在父组件维护选中值的状态
  函数组件写法参考：

  import { useState } from 'react'
  // 组件内声明状态
  const [selectedNode, setSelectedNode] = useState(null)
  

• 第二步：改造onChange回调，在回调里同步更新选中状态

  const onChange = (currentNode) => {
    // radioSelect为单选模式，直接取当前选中节点更新状态即可
    setSelectedNode(currentNode)
    // 原有其他业务逻辑，比如表单字段赋值可以保留在这里
  }
  

• 第三步：给组件传入value属性，将维护的选中状态绑定到组件上，注意单选模式下value要求传入数组格式

  <Row>
    <DropdownTreeSelect
      data={unitList}
      id='unit_id'
      mode='radioSelect'
      onChange={onChange}
      className="mdl-demo"
      value={selectedNode ? [selectedNode] : []}
    />
  </Row>
  

• 兜底排查：如果按上述修改后仍无法回显，检查传入的unitList数据，每个节点必须带唯一的value字段，组件依赖该字段做选中项匹配，缺失唯一标识会导致匹配失败无法展示选中内容。

内容的提问来源于stack exchange，提问作者stack user