React js onClick can't pass value to method

Question

I want to read the onClick event value properties. But when I click on it, I see something like this on the console:

SyntheticMouseEvent {dispatchConfig: Ob         


        

Answer 1

There are 3 ways to handle this :-

1. Bind the method in constructor as :-

   export class HeaderRows extends Component {
      constructor() {
          super();
          this.handleSort = this.handleSort.bind(this);
      }
   }
   

2. Use the arrow function while creating it as :-

   handleSort = () => {
       // some text here
   }
   

3. Third way is this :-

   <th value={column} onClick={() => that.handleSort} >{column}</th>
   

Answer 2

class extends React.Component {
    onClickDiv = (column) => {
        // do stuff
    }
    render() {
        return <div onClick={() => this.onClickDiv('123')} />
    }
}

Answer 3

You can use your code like this:

<th value={column} onClick={(e) => that.handleSort(e, column)} >{column}</th>

Here e is for event object, if you want to use event methods like preventDefault() in your handle function or want to get target value or name like e.target.name.

Answer 4

This is my approach, not sure how bad it is, please comment

In the clickable element

return (
    <th value={column} onClick={that.handleSort} data-column={column}>   {column}</th>
);

and then

handleSort(e){
    this.sortOn(e.currentTarget.getAttribute('data-column'));
}

Answer 5

this example might be little different from yours. but i can assure you that this is the best solution you can have for this problem. i have searched for days for a solution which has no performance issue. and finally came up with this one.

class HtmlComponent extends React.Component {
  constructor() {
    super();
    this.state={
       name:'MrRehman',
    };
    this.handleClick= this.handleClick.bind(this);
  }

  handleClick(event) {
    const { param } = e.target.dataset;
    console.log(param);
    //do what you want to do with the parameter
  }

  render() {
    return (
      <div>
        <h3 data-param="value what you wanted to pass" onClick={this.handleClick}>
          {this.state.name}
        </h3>
      </div>
    );
  }
}

UPDATE

incase you want to deal with objects that are supposed to be the parameters. you can use JSON.stringify(object) to convert to it to string and add to the data set.

return (
   <div>
     <h3 data-param={JSON.stringify({name:'me'})} onClick={this.handleClick}>
        {this.state.name}
     </h3>
   </div>
);

Answer 6

Simply create a function like this

  function methodName(params) {
    //the thing  you wanna do
  }

and call it in the place you need

< Icon onClick = { () => { methodName(theParamsYouwantToPass); } }/ >