CODEWITHSUNDEEP
reactjsmaterial-table
lil-works
lil-works

Reputation: 710

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

In order to disable some action only for some rows I'm trying to overwrite the Action for each row. I followed the answer given here: 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>
                    )



        }
        }

  }}

Everything works well for the action add. A new row within a form is displayed for the add button (the else part of the action). But Nothing is fired for the typeof props.action === "function". There is no error and element.onClick is a onClick function. I tried also

onClick={e => element.onClick}

But it doesn't fire nothin neither.

Any clues or ideas are welcome

Upvotes: 0

Views: 3893

Answers (3)

Jitendra Rathor
Jitendra Rathor

Reputation: 686

First, assign this to some variable before rendering it to the onClick function. ex see below define var assiigned_this. Then call a function in the following way. Here the assiigned_this is nothing but this and second argument you can pass anything which you need. Here I am passing number 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>
    );
  }

Now define the click function in the following way.

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

Now on click of the handleItemOnClick function, you can see the result in the console.

Upvotes: 0

Vash
Vash

Reputation: 186

You should try using:
onClick{(event) => element.onClick(event, props.yourData)}

Passing props with the function is a necessity here.

Hope this helps you

Upvotes: 1

lil-works
lil-works

Reputation: 710

I had to to this:

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

instead of 

onClick={element.onClick}

Upvotes: 1

Related Questions