Question

为了仅对某些行禁用某些操作，我试图覆盖每一行的操作。我遵循此处给出的答案：React Material Table action button markup overriding for multiple actions

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>
                    )



        }
        }

  }}

对于动作添加，一切都很好。表单内的新行将显示添加按钮（动作的其他部分）。但是propof.action = type =“ 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)}

在这里传递带有该功能的道具是必要的。

希望这对您有帮助

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事件不会触发操作

3 个答案: