Ad

Pass Parameter With Button Click

- 1 answer

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>
Ad

Answer

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>
Ad
source: stackoverflow.com
Ad