傳遞在道具多個方法ReactJS

Question

我有一個主App部件，其包括此...

changeAmount(a) { 
    console.log('changing: ', a); 
} 

<Table 
    data={result} 
    onClick={() => this.changeAmount()} 
/> 

然後<Table>部件具有在其內具有兩個按鈕<TableRow>組件。有沒有辦法通過多個onClick方法，所以我可以使用一個爲decrease和一個爲increase？

export default class TableRow extends Component { 
    render() { 
    const {row, onClick} = this.props; 
     return (
     <tbody> 
     <tr> 
      ..... 
      <span> 

       <button 
       className="btn btn-outline-primary btn-sm minusBtn" 
       onClick={onClick} 
       > 
       - 
       </button> 
      ..... 
      </tr> 
     </tbody> 
    ) 
    } 
} 

編輯：

應用組件：

<Table 
    data={result} 
    onClick={(type) => this.changeAmount(type)} 
/> 

表組件：

{ 
    data.map(row => (
     <TableRow key={row._id} row={row} onClick={onClick}/> 
    )) 
} 

的TableRow組分：

使用一個處理程序用的參數嘗試過

<button 
    className="btn btn-outline-primary btn-sm minusBtn" 
    onClick={this.props.onClick('decrease')} 
> 

Answer 1

有沒有辦法傳遞多個onClick方法？

是的，看到props我們可以通過任意鍵名稱傳遞任何沒有數據/方法的子組件，它不需要使用名稱onClick傳遞方法時，你可以使用任何名稱，比如click_one，click_two或click_decreaseclick_increase 。

像這樣：

<Table 
    data = {result} 
    onClick_increase = {() => this.ABC()} 
    onClick_decrease = {() => this.XYZ()} 

    abc = {...} 
    xyz = {...} 
/> 

現在，您可以通過this.props.onClick_increase()和this.props.onClick_decrease()訪問的子組件的這些方法。

另一種可能的方式：

您可以使用相同的功能有兩個按鈕，但對於通過從子組件的唯一標識符數據來確定方法是否被要求減少或增加沿。

像這樣：

<Table 
    data={result} 
    onClick={(type, data) => this.changeAmount(type, data)} 
/> 

changeAmount(type, data){ 
    if(type == 'decrease'){ 
     ..... 
    }else{ 
     ..... 
    } 
} 

從小孩：

this.props.onClick('decrease', data);