Paulos3000 Paulos3000 - 1 year ago 53
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 Source

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>