Question

我将以下方法作为我在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;
}

这个想法是能够显示数组的项目并为每个项目提供删除按钮。这些项目显示在HTML表格中。但是，每行的按钮都是删除数组中的最后一项（表的最后一行）。显然，即使＆＃34; deduc＆＃34;是一个局部变量，当click事件触发时，它应该超出范围，deduc似乎具有在循环的最后一次迭代中使用的值。如何告诉每个按钮我要删除的数组项目是什么？

编辑：

这是＆＃34;删除＆＃34;的代码组件的方法和构造函数：

constructor(props)
{
    super(props);

    this.state = {
        addMethod : this.props.addMethod,
        delMethod : this.props.delMethod
    };

    this.renderDeducs = this.renderDeducs.bind(this);
    this.delete = this.delete.bind(this);
}

delete(nombre)
{
    alert("Deleting " + nombre);
    this.state.delMethod(nombre); 
}

正如您所看到的，数组方法的实际删除发生在绑定到组件树中更高层组件的方法上（您如何实现＆＃34;单一事实来源＆＃34;，是不是？）在父组件上，这就是该方法的样子：

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;
        }
    }

}

Answer 1

将代码更改为：

您的问题是，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;
}

有关javascript hoisting

的信息

Answer 2

你忘了绑定处理程序。还要确保使用如下的循环，它会让你的生活变得轻松

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
}

如何将值传递给反应按钮

2 个答案: