如何向React按钮传递参数？附组件代码示例

嘿，我注意到你已经在删除按钮里尝试用箭头函数传递参数了，不过我可以给你整理几种React中给按钮传递参数的靠谱方法，让你能更灵活地处理这类场景，顺便还能帮你修正代码里的一个小问题～

1. 箭头函数包裹（你当前在用的方式） #

这种方法最直观，通过箭头函数包裹你的事件处理函数，就能把参数传递进去，同时还能保证this的指向正确（因为箭头函数不会绑定自己的this，会沿用外层上下文的this）。

不过你的renderDeducs方法有个小问题：最后没有返回组装好的deducArray，这样表格行是渲染不出来的，记得加上return deducArray哦。修正后的代码如下：

renderDeducs() { 
  var deducArray=[]; 
  for(var x = 0; x < this.props.deducciones.length; x++) { 
    var deduc = this.props.deducciones[x]; 
    deducArray.push(<tr key={x}> 
      <td key={`${x}-nombre`}>{deduc.nombre}</td> 
      <td key={`${x}-porciento`}>{deduc.porciento}</td> 
      <td>
        <button onClick={(e) => {this.delete(deduc.nombre, e)}}>Borrar</button> 
        | 
        <button onClick={(e) => {this.edit(deduc.nombre, deduc.porciento, e)}}>Editar</button>
      </td> 
    </tr>); 
  }
  // 别忘了返回数组！
  return deducArray;
}

这里我还把事件对象e也传进去了，如果你需要用到事件相关的操作（比如阻止默认行为），就可以在delete或edit方法里拿到它。

2. 使用bind绑定参数 #

另一种常用方式是利用Function.prototype.bind，它可以帮你绑定this指向，同时预先传入参数。写法如下：

renderDeducs() { 
  var deducArray=[]; 
  for(var x = 0; x < this.props.deducciones.length; x++) { 
    var deduc = this.props.deducciones[x]; 
    deducArray.push(<tr key={x}> 
      <td key={`${x}-nombre`}>{deduc.nombre}</td> 
      <td key={`${x}-porciento`}>{deduc.porciento}</td> 
      <td>
        <button onClick={this.delete.bind(this, deduc.nombre)}>Borrar</button> 
        | 
        <button onClick={this.edit.bind(this, deduc.nombre, deduc.porciento)}>Editar</button>
      </td> 
    </tr>); 
  }
  return deducArray;
}

注意：bind会返回一个新的函数，每次组件渲染时都会创建新函数，如果你的组件是频繁渲染的大型组件，可能会有轻微的性能影响，但对于大多数普通场景来说完全没问题。

3. 封装自定义组件（适合复杂场景） #

如果你的按钮逻辑比较复杂，或者需要在多个地方复用，可以把按钮封装成一个自定义组件，把需要的参数通过props传递进去：

// 自定义按钮组件
const DeducButton = ({ type, item, onAction }) => {
  const handleClick = () => {
    onAction(item.nombre, item.porciento);
  };

  return <button onClick={handleClick}>{type === 'delete' ? 'Borrar' : 'Editar'}</button>;
};

// 然后在renderDeducs里使用
renderDeducs() { 
  var deducArray=[]; 
  for(var x = 0; x < this.props.deducciones.length; x++) { 
    var deduc = this.props.deducciones[x]; 
    deducArray.push(<tr key={x}> 
      <td key={`${x}-nombre`}>{deduc.nombre}</td> 
      <td key={`${x}-porciento`}>{deduc.porciento}</td> 
      <td>
        <DeducButton type="delete" item={deduc} onAction={this.delete} />
        |
        <DeducButton type="edit" item={deduc} onAction={this.edit} />
      </td> 
    </tr>); 
  }
  return deducArray;
}

这种方式更符合React的组件化思想，代码也更整洁，适合参数较多或者逻辑复杂的场景。

小提醒 #

另外，你当前用x作为<tr>的key，虽然能工作，但更推荐用数据里唯一的标识（比如deduc.nombre，如果它是唯一的）作为key，这样React的diff算法能更高效地更新DOM。

内容的提问来源于stack exchange，提问作者tutiplain