按鈕點擊傳遞參數

我有幾個下拉框與不同的職員類型。
我需要在窗體中添加/編輯它們。
因此，每個下拉列表中都有一個添加/編輯按鈕。
但我只創建了一個按鈕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

按鈕點擊傳遞參數

回答

相關問題