React Flow通过侧边栏更新选中节点名称的实现咨询

你需要新增选中节点状态、将修改逻辑通过props透传给侧边栏组件，按以下步骤修改即可：

第一步 修改main.js #

1. 新增选中节点ID状态，替换原有的onElementClick逻辑，新增节点名称更新方法

// 原有状态后面新增
const [selectedNodeId, setSelectedNodeId] = useState(null);

// 替换原来的onElementClick
const onElementClick = (event, element) => {
  // 仅处理节点点击，忽略边的点击
  if (element.type !== 'edge') {
    setSelectedNodeId(element.id);
    // 把当前选中节点的名称同步到输入框状态
    setNodeName(element.data.label);
  }
};

// 新增更新节点名称方法
const updateNodeLabel = () => {
  if (!selectedNodeId) return;
  setElements(els => els.map(item => {
    if (item.id === selectedNodeId) {
      return {
        ...item,
        data: {
          ...item.data,
          label: nodeName
        }
      };
    }
    return item;
  }));
};

2. 给Sidebar组件传递需要的props

// 把原来的<Sidebar />替换成
<Sidebar 
  nodeName={nodeName}
  setNodeName={setNodeName}
  updateNodeLabel={updateNodeLabel}
  hasSelectedNode={!!selectedNodeId}
/>

第二步 修改Sidebar.js #

1. 接收父组件传递的props，删掉原有错误的changeNodeName方法（useState不能写在组件内部的普通函数里）

// 替换组件首行
export default ({ nodeName, setNodeName, updateNodeLabel, hasSelectedNode }) => {

2. 在侧边栏原有拖拽节点区域下方，新增名称修改输入框

{/* 原有拖拽节点代码保持不变，在其下方新增以下代码 */}
<Box sx={{ mt: 4, width: '100%' }}>
  <div className="description" style={{ marginBottom: 8 }}>
    {hasSelectedNode ? '修改选中节点名称' : '请先点击选中节点'}
  </div>
  <input
    value={nodeName}
    onChange={(e) => setNodeName(e.target.value)}
    disabled={!hasSelectedNode}
    style={{ width: '100%', padding: '8px', marginBottom: 8, boxSizing: 'border-box' }}
  />
  <button 
    onClick={updateNodeLabel}
    disabled={!hasSelectedNode}
    style={{ width: '100%', padding: '8px' }}
  >
    保存名称
  </button>
</Box>

可选优化 #

如果不需要点击保存按钮，想要输入时实时修改节点名称，直接把updateNodeLabel的逻辑写到输入框的onChange事件里即可，无需单独加保存按钮。

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