按钮点击传递参数

我有几个下拉框与不同的职员类型。
我需要在窗体中添加/编辑它们。
因此，每个下拉列表中都有一个添加/编辑按钮。
但我只创建了一个按钮componentElement。按钮点击传递参数

有没有办法，我能察觉/或传递id我_addStaff函数，这样我知道单击了下拉框按钮的方式。像：添加一个职员的类型驱动程序

或更好，但你怎么能创建一个带有ID的按钮。你可以在{addStaff}中传递一个参数，如{addStaff("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>

来源

2016-01-11 morne

好像你可以肯定。我得到一个按钮对象与“司机”的ID

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>

来源

2016-01-11 13:46:01 morne

This._addStaff在这种方法中仍然不会得到参数。您必须使用bind将参数传递给它。 –

首先，将参数传递给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> 
) 
} 
}

我希望这是有道理的。请注意，我已经自由编写了此代码，并且可能存在语法错误。请把它当作一个伪代码。

来源

2016-01-11 13:45:42

Abhishek，谢谢。我明白你的意思，但是如果你看看我的回答，这就创建了多个具有不同ID的按钮。这不是我的问题吗？ – morne

我们都是用addStaff组件做同样的事情。我只是在一个不同的组件中重构它，我个人比较喜欢它。你的解决方案的另一个问题是，addStaff仍然不会传递给它的参数。看到我的解决方案的第一部分。 –

是的你是对的。我认为我有第一部分协调创建独特的按钮，但你没有我刚刚实现的关键点。 – morne

按钮点击传递参数

回答

相关问题