Paulos3000 Paulos3000 - 1 month ago 5
Javascript Question

Passing values to .bind() method

If I am calling an event handler function, I know I can use

.bind(this)
to pass the bound
this
value, but how to I pass extra arguments to the function call?

I have this:

onSubmit={this.handleSubmit.bind(this, todoListLength, userId)}


Then my function definition is like so:

handleSubmit(e, id, userId) {
console.log(userId) // returns nothing
console.log(id) // returns nothing
}


The first argument -
e
- is my event object, but I want to pass
id
and
userId
as well.

But when I try to log the value, in my
handleSubmit
definition, it returns nothing.

Where am I going wrong?

Answer

Arguments you bind to the function will be supplied to it before the ones that the bound function receives. So your function should declare its parameters with e at the end:

handleSubmit(id, userId, e) { 
   console.log(userId);
   console.log(id);
}

Here's an example, using onClick instead of onSubmit because Stack Snippets don't like forms:

class MyForm extends React.Component {
  handleSubmit(id, userId, e) {
    // Note: `id` seems an odd name for the todoListLength argument ;-)
    console.log("id = " + id);
    console.log("userId = " + userId);
    console.log("e.type = " + e.type);
  }
  
  render() {
    let {todoListLength, userId} = this.props;
    return (
      <input type="button" value="Click Me" onClick={this.handleSubmit.bind(this, todoListLength, userId)} />
    );
  }
}
ReactDOM.render(
  <MyForm todoListLength={10} userId={"tjc"} />,
  document.getElementById("react")
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>