Reactjs 如何将值传递到react按钮

我将以下方法作为react应用程序中的一个组件的一部分

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.toString()+"nombre"}>{deduc.nombre}</td>
            <td key={x.toString()+"porciento"}>{deduc.porciento}</td>
            <td><button onClick={(e) => {this.delete(deduc.nombre)}}>Borrar</button> | <button>Editar</button> </td>
            </tr>
        );
    }
    console.log(deducArray);
    return deducArray;
}

如您所见，从数组方法中实际删除发生在绑定到组件树中更高一级组件的方法上（这就是如何实现父组件上的“单一真相来源”，不是吗？），该方法看起来是这样的：

delDeduction(nombre)
{
    var stateArray = this.state.deducciones;

    for (var x =0;x<stateArray.length;x++)
    {
        if(stateArray[x].nombre === nombre)
        {
            stateArray.splice(x,1);
            this.setState({deducciones:stateArray});
            return;
        }
    }

delderation（nombre）
{
var stateArray=this.state.deducciones；
对于（var x=0；x您忘记绑定处理程序。另外，请确保使用如下循环，这将使您的生活变得轻松

renderDeducs() {
  return (
    { 
      this.props.deducciones.map(deduc => 
        <tr>
          <td key={x.toString()+"nombre"}>{deduc.nombre}</td>
          <td key={x.toString()+"porciento"}>{deduc.porciento}</td>
          <td>
            <button onClick={this.deleteme.bind(this, deduc.nombre)}>
              Borrar
            </button> | 
            <button>Editar</button>
          </td>
         </tr>
      )
    }
   );
}

deleteme(n){
  let initial_val = this.props.deducciones.slice();
  let obj_to_del= initial_val.find(d => d.nombre === n);
  initial_val.remove(obj_to_del);
  //update your state with the initial val
}

rendereducs（）{
返回(
{ 
this.props.deducciones.map（deduc=>
{deduc.nombre}
{deduc.porciento}
博拉尔
| 
编辑
)
}
);
}
deleteme（n）{
让initial_val=this.props.deducciones.slice（）；
让obj_to_del=initial_val.find（d=>d.nombre==n）；
初始值删除（对象删除）；
//使用初始值更新您的状态
}
您忘了绑定处理程序。另外，请确保使用如下循环，这将使您的生活变得轻松

renderDeducs() {
  return (
    { 
      this.props.deducciones.map(deduc => 
        <tr>
          <td key={x.toString()+"nombre"}>{deduc.nombre}</td>
          <td key={x.toString()+"porciento"}>{deduc.porciento}</td>
          <td>
            <button onClick={this.deleteme.bind(this, deduc.nombre)}>
              Borrar
            </button> | 
            <button>Editar</button>
          </td>
         </tr>
      )
    }
   );
}

deleteme(n){
  let initial_val = this.props.deducciones.slice();
  let obj_to_del= initial_val.find(d => d.nombre === n);
  initial_val.remove(obj_to_del);
  //update your state with the initial val
}

rendereducs（）{
返回(
{ 
this.props.deducciones.map（deduc=>
{deduc.nombre}
{deduc.porciento}
博拉尔
| 
编辑
)
}
);
}
deleteme（n）{
让initial_val=this.props.deducciones.slice（）；
让obj_to_del=initial_val.find（d=>d.nombre==n）；
初始值删除（对象删除）；
//使用初始值更新您的状态
}
将代码更改为：

您的问题是，
deduc
被定义为
var
，因此
deduc
被提升到函数内部。然后尝试使用
let
定义它，它将阻止这种行为

renderDeducs()
{
    var deducArray=[];

    for(var x =0;x<this.props.deducciones.length;x++)
    {
        let deduc = this.props.deducciones[x];


        deducArray.push(<tr key={x}>
            <td key={x.toString()+"nombre"}>{deduc.nombre}</td>
            <td key={x.toString()+"porciento"}>{deduc.porciento}</td>
            <td><button onClick={(e) => {this.delete(deduc.nombre)}}>Borrar</button> | <button>Editar</button> </td>
            </tr>
        );
    }
    console.log(deducArray);
    return deducArray;
}

rendereducs（）
{
var=carray[]；
对于（var x=0；xBorrar | Editar
);
}
控制台.日志（卡雷）；
返回卡雷；
}

有关更改代码的信息如下：

您的问题是，
deduc
被定义为
var
，因此
deduc
被提升到函数内部。然后尝试使用
let
定义它，它将阻止这种行为

renderDeducs()
{
    var deducArray=[];

    for(var x =0;x<this.props.deducciones.length;x++)
    {
        let deduc = this.props.deducciones[x];


        deducArray.push(<tr key={x}>
            <td key={x.toString()+"nombre"}>{deduc.nombre}</td>
            <td key={x.toString()+"porciento"}>{deduc.porciento}</td>
            <td><button onClick={(e) => {this.delete(deduc.nombre)}}>Borrar</button> | <button>Editar</button> </td>
            </tr>
        );
    }
    console.log(deducArray);
    return deducArray;
}

rendereducs（）
{
var=carray[]；
对于（var x=0；xBorrar | Editar
);
}
控制台.日志（卡雷）；
返回卡雷；
}

关于
的信息您可以发布
删除
函数的代码吗？您的代码在这里看起来很好，不确定为什么它会得到错误的值。表中的第一个单元格对于每个项目都不同吗？
{deduc.nombre}
是否呈现了正确的数字？每个“nombre”属性对于每个项都是唯一的。是否可以发布
delete
函数的代码？您的代码在这里看起来很好，不确定为什么它会得到错误的值。表中的第一个单元格对于每个项是否不同？
{deduc.nombre}
是否呈现了正确的数字？每个“nombre”属性对于每个项目都是唯一的。
this.props
是只读的！
this.props.deducciones=initial\u val；
不起作用！是的，我一直在使用mobx，我可以这样做，让我更新答案：）如果您使用的是vs 16.2，您可以将组件包装在
React.Fragment
中以删除那些讨厌的div。只需将我的代码更新为使用.map（）即可完成整个工作。由于我没有更改onClick处理程序，所以仍然不确定为什么我的原始代码不能工作。我将更新我的问题以发布完整的组件代码。我认为这是上下文问题
这个。道具
是只读的<代码>this.props.deducciones=初始值不起作用！oops是的，我一直在使用mobx，我可以这样做，让我更新答案：）你可以在
React.Fragment
中包装组件，以删除那些讨厌的div，如果你使用的是vs 16.2。只需将我的代码更新为使用.map（）就可以完成整个工作。由于我没有更改onClick处理程序，所以仍然不确定为什么我的原始代码不能工作。我将更新我的问题以发布完整的组件代码。我认为这是上下文问题。你的答案也适用。我只能选择一个答案，但我将投票支持提供一个只需最少更改的解决方案！你的答案也行。我只能选择一个答案，但我将投票支持提供一个只需最少更改的解决方案！