如何将使用.bind()传参的原生JS代码转换为React代码

问题描述 #

我正尝试把一段原生JS代码转成React，但在将原editNode函数的参数传递给saveNodeData时遇到问题——点击按钮时提示callback不是一个函数，因为原editNode里的参数没正确传递。

原生JS代码 #

function editNode(data,callback) {
  // 其他无关代码
  document.getElementById("node-saveButton").onclick = saveNodeData.bind(this, data, callback);
  document.getElementById("node-cancelButton").onclick = cancelNodeEdit.bind(this, callback);
  // 其他无关代码
}

现有React按钮代码 #

<Button variant="contained" onClick={cancelNodeEdit}>Cancel</Button>
<Button variant="contained" onClick={saveNodeData}>Save</Button>

当前使用的处理函数 #

function saveNodeData(data, callback) {
    data.label = nodeLabel;
    data.name = nodeName;
    data.description = nodeDescription;
    data.nodeType = nodeType;
    data.organization = organization;

    setNodeEditor(false);
    callback(data);
}

const cancelNodeEdit = (callback) => {
    setNodeEditor(false);
    callback(null);
};

注：需求基于vis.js，该库通过回调将数据返回给操作对象。

解决方案 #

问题核心是：原生JS用bind提前给点击事件绑定了data和callback参数，但React的onClick默认只会传递事件对象，不会自动带上你需要的自定义参数。可以通过以下方式修复：

1. 箭头函数直接传递参数 #

渲染按钮时，用箭头函数包裹目标函数并传入data和callback（前提是组件内已拿到这两个参数）：

<Button variant="contained" onClick={() => cancelNodeEdit(callback)}>Cancel</Button>
<Button variant="contained" onClick={() => saveNodeData(data, callback)}>Save</Button>

这种方式简单直观，适合参数不会频繁变动的场景。

2. 用useCallback提前绑定函数 #

如果参数可能动态变化，用useCallback缓存绑定后的函数，避免每次渲染重新创建：

import { useCallback } from 'react';

const boundSave = useCallback(() => saveNodeData(data, callback), [data, callback, nodeLabel, nodeName, nodeDescription, nodeType, organization]);
const boundCancel = useCallback(() => cancelNodeEdit(callback), [callback]);

然后在按钮中使用：

<Button variant="contained" onClick={boundCancel}>Cancel</Button>
<Button variant="contained" onClick={boundSave}>Save</Button>

注意依赖数组要包含所有用到的状态，确保函数能正确获取最新值。

3. 确认参数已传入组件 #

还要检查vis.js调用你的自定义编辑组件时，是否正确将data和callback传递到组件内部——如果这两个参数没拿到，后续传递自然会报错。

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