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_decrease click_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);

在道具中传递多种方法ReactJS

1 个答案: