Pass parameter with button click

Question

I have a few dropdown boxes with different staff member types.
I need to Add/Edit them in a form.
So along each dropdown is a add/edit button.
but I only created one button componentElement.

Is there a way that I can detect/or pass a id to my _addStaff function so that I know for which dropdown box the button was clicked. like: Add a staff of type Driver

Or better yet, how can you create a button with a id. Can you pass a parameter in the {addStaff} with something like {addStaff("driver")}. Thisway you can know you are clicking on the add/edit driver button.

_addStaff(t){
    console.log("Add a staff of type"+ t);
},


render: function() {

    const addStaff = (
        <div onClick={this._addStaff} style={{width:120}}>
            <Button bsStyle='primary' bsSize='small' block>Add/Edit</Button>
        </div>
    );



// *****    The following is repeated for each staff member type ( in this case its a driver)!!!!!!!!!!!!!!!!

<div className="row">
    <div className="col-sm-9" >
        {this._getDropdownComponent("driverInCharge", null,{label:"Driver",id:"driver" ,list:this.props.drivers, valueField:"mds_id", textField:'mds_name',emptyValue:null,onBlur:this._saveDriverInCharge,fullList:this.props.Staff})}
    </div>
    <div className="col-sm-2" style={buttStyle}>
        {addStaff}
    </div>
</div>

Abhishek Jain · Accepted Answer · 2016-01-11 13:45:42Z

1

Firstly, to pass the parameter to the addStaff method, you will do something like :-

onClick={this._addStaff.bind(null, yourParam)}

and this will pass the yourParam into your parameter t.

Now, in the current state, your addStaff is not parameterized, so ideally you will create a tiny component that accepts a staff props and binds the button to onClick accordingly.

class AddStaff extends React.Component {
 render: function() {
  return (
     <div onClick={this.props.addStaff.bind(null, this.props.staff)} style={{width:120}}>
            <Button bsStyle='primary' bsSize='small' block>Add/Edit</Button>
        </div>
  )
 }
}

I hope this makes sense. Please note that I have written this code in free-hand and there may be syntax errors. Please treat this as just a pseudo-code.

answered Jan 11, 2016 at 13:45

Abhishek Jain

2,97724 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

morne Over a year ago

Abhishek, thanks. I understand what you mean, but if you look at my answer, this created multiple buttons with different id's. Will this not soleve my problem?

Abhishek Jain Over a year ago

We both are essentially doing the same thing with the addStaff component. I am just refactoring it in a different component, which I personally prefer. Another problem with your solution is that addStaff will still not get parameter passed to it. See first part of my solution.

morne Over a year ago

yes you are right. I think I have the first part coorrect to create unique buttons, but you have tthe critical point, which I just implemented.

morne · Accepted Answer · 2016-01-11 13:52:07Z

0

Well seems like you can yes. I get a button object with a id of 'Driver'

const addStaff = (t) => (
where t is the parameter you would like to pass.

{addStaff('Driver')}

And call it like this for each button you would like to add.

render: function() {

const addStaff = (t) => (
    <div onClick={this._addStaff} style={{width:120}}>
        <Button id={t} bsStyle='primary' bsSize='small' block>Add/Edit</Button>
    </div>
);




<div className="row">
    <div className="col-sm-9" >
        {this._getDropdownComponent("driverInCharge", null,{label:"Driver",id:"driver" ,list:this.props.drivers, valueField:"mds_id", textField:'mds_name',emptyValue:null,onBlur:this._saveDriverInCharge,fullList:this.props.Staff})}
    </div>
    <div className="col-sm-2" style={buttStyle}>
        {addStaff('Driver')}
    </div>
</div>

edited Jan 11, 2016 at 13:52

answered Jan 11, 2016 at 13:46

morne

4,19911 gold badges56 silver badges103 bronze badges

1 Comment

Abhishek Jain Over a year ago

This._addStaff will still not get a parameter in this approach. You will have to use bind to pass the parameter to it.

Collectives™ on Stack Overflow

Pass parameter with button click

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related