单击按钮传递参数

Question

我有几个不同工作人员类型的下拉框。
我需要 Add/Edit 表格。
所以每个下拉菜单都有一个 add/edit 按钮。
但我只创建了一个按钮组件元素。

有没有一种方法可以 detect/or 将 id 传递给我的 _addStaff 函数，以便我知道单击了哪个下拉框的按钮。喜欢：添加类型为Driver

的员工

或者更好的是，如何创建一个带有 ID 的按钮。你可以在 {addStaff} 中传递一个参数，比如 {addStaff("driver")}。这样您就可以知道您正在单击 add/edit driver 按钮。

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

Answer 1

首先，要将参数传递给 addStaff 方法，您需要执行以下操作：-

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

这会将 yourParam 传递给您的参数 t。

现在，在当前状态下，您的 addStaff 未参数化，因此理想情况下，您将创建一个微型组件，该组件接受员工道具并将按钮相应地绑定到 onClick。

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>
  )
 }
}

我希望这是有道理的。请注意，我在 free-hand 中编写了这段代码，可能存在语法错误。请将其视为 pseudo-code.

Answer 2

嗯，看来你可以。我得到一个 id 为 'Driver'

的按钮对象

const addStaff = (t) => (
其中 t 是您要传递的参数。

{addStaff('Driver')}

然后为每个要添加的按钮调用它。

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>

单击按钮传递参数

Pass parameter with button click

reactjs

react-jsx