Javascript React-onMouseDown：将事件与参数一起传递

我试图将一个事件与另外两个参数一起传递到handleomousedown函数中。我现在拥有的代码如下所示：

onMouseDown={（e）=>{this.handleMouseDown（e，row，col）}}

在我的handleMouseDown功能中，我有：

handleMouseDown = (event,row,col) => {
    event.preventDefault();
    ...
}

然而，当我调用“.preventDefault”函数时，我得到了一个错误。错误是说：

TypeError:event.preventDefault不是函数

为什么会这样

编辑（提供更多上下文）： 在我的渲染函数中，我生成一个由节点组成的网格，每个节点都有一个特定的列和行号。render中的代码片段如下所示：

         {this.state.grid.map((row, rowIdx) => {
              return (
                <div key={rowIdx}>
                  {row.map((node, nodeIdx) => {
                    const {
                      row, 
                      col
                    } = node;
                    return (
                      <Node
                        key={nodeIdx}
                        col={col}
                        onMouseDown={(row,col,event) => {this.handleMouseDown(row,col,event)}}
                        row={row}></Node>
                    );
                  })}

          return (
            <div onMouseDown={() => onMouseDown(row, col)}>
            </div>
          );

{this.state.grid.map（（row，rowIdx）=>{
返回(
{row.map（（node，nodeIdx）=>{
常数{
一行
上校
}=节点；
返回(
{this.handleMouseDown（行、列、事件）}
行={row}>
);
})}

在每个节点中，我在渲染函数中调用onMouseDown，如下所示：

         {this.state.grid.map((row, rowIdx) => {
              return (
                <div key={rowIdx}>
                  {row.map((node, nodeIdx) => {
                    const {
                      row, 
                      col
                    } = node;
                    return (
                      <Node
                        key={nodeIdx}
                        col={col}
                        onMouseDown={(row,col,event) => {this.handleMouseDown(row,col,event)}}
                        row={row}></Node>
                    );
                  })}

          return (
            <div onMouseDown={() => onMouseDown(row, col)}>
            </div>
          );

返回(
onMouseDown（行、列）}>
);

大多数事件处理程序只接受事件对象作为其参数。但这并不意味着您不能将其他内容传递到

handleMouseDown

回调函数中。您应该这样编写它：

         {this.state.grid.map((row, rowIdx) => {
              return (
                <div key={rowIdx}>
                  {row.map((node, nodeIdx) => {
                    const {
                      row, 
                      col
                    } = node;
                    return (
                      <Node
                        key={nodeIdx}
                        col={col}
                        onMouseDown={(row,col,event) => {this.handleMouseDown(row,col,event)}}
                        row={row}></Node>
                    );
                  })}

          return (
            <div onMouseDown={() => onMouseDown(row, col)}>
            </div>
          );

handleMouseDown=（e，row，col）=>{
e、 坚持
e、 预防默认值（）
控制台日志（e、行、列）
//不管你想用e、row和col做什么
}
//在渲染内部：
const row='whatever'
const col='和stuff'
返回(
{this.handleMouseDown（e，row，col）}>
这会奏效的
)

---

进行基本调试：添加

console.log（event）；

作为第一行，并检查它的内容。（代码对我来说很好：）当添加console.log（event）行时，它会打印出行号。因此我将代码改为：

onMouseDown={（row，col，event）=>{this.handleMouseDown（row，col，event）}

并将方法改为`handleMouseDown=（行、列、事件）=>{console.log（“事件”+事件）；…}`现在事件打印为“未定义”你能给我们一些关于你在组件中调用它的上下文吗？

行

和

列

定义在哪里？大多数事件处理程序函数只将事件作为参数。请发布更多的代码，因为错误与你的代码片段不匹配。我已经编辑了原始帖子