CODEWITHSUNDEEP
reactjs
morne
morne

Reputation: 4169

Pass parameter with button click

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>

Upvotes: 0

Views: 125

Answers (2)

morne
morne

Reputation: 4169

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>

Upvotes: 0

Abhishek Jain
Abhishek Jain

Reputation: 2977

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.

Upvotes: 1

Related Questions