React Material Table 用于编辑和删除的操作 OnClick 事件不会触发操作

Question

为了仅对某些行禁用某些操作，我试图覆盖每一行的操作。我按照这里给出的答案：

Action:
    props => {

      if (typeof props.action === "function"){
            var element= props.action(props.data);
      

            return (
                <Button aria-label={element.icon} size="small"
                    onClick={element.onClick}
                >
                <element.icon/>
                </Button>
                )
        }else{

                return (
                    <Button aria-label={props.action.icon} size="small"
                        onClick={props.action.onClick}
                    >
                        <props.action.icon/>
                    </Button>
                    )



        }
        }

  }}

添加操作一切正常。为添加按钮（操作的其他部分）显示表单中的新行。但是对于 typeof props.action === "function" 什么都没有触发。没有错误， element.onClick 是一个 onClick 函数。我也试过了

onClick={e => element.onClick}

但它也没有触发。

欢迎提供任何线索或想法

Answer 1

我不得不这样做：

onClick={(event) => element.onClick(event, props.data)}

而不是

onClick={element.onClick}

Answer 2

您应该尝试使用：
onClick{(event) => element.onClick(event, props.yourData)}

这里必须用函数传递 props。

希望对您有所帮助

Answer 3

首先，将 this 分配给某个变量，然后再将其呈现给 onClick 函数。例如，请参见下面定义 var assiigned_this。然后通过以下方式调用一个函数。这里的 assiigned_this 只不过是 this 和第二个参数，你可以传递任何你需要的东西。我在这里传递数字 4.

renderRows() {
    var assigned_this = this;
    return (
      <tr key={"item-" + i}>
        <td>
          <button onClick={assigned_this.handleItemOnClick.bind(assigned_this, 4)}>
            Delete
          </button>
        </td>
      </tr>
    );
  }

现在按如下方式定义点击函数。

handleItemOnClick(i) {
   console.log(i)  // It will print 4
  }

现在点击 handleItemOnClick 函数，您可以在控制台中看到结果。

React Material Table 用于编辑和删除的操作 OnClick 事件不会触发操作

React Material Table action OnClick event for edit and delete does not fire action

reactjs

material-table