Question

我找到了这个JSFiddle：http://jsfiddle.net/jwm6k66c/315/但不同之处在于我正在尝试在具有类依赖性的更复杂的体系结构中实现项删除。

值得一提的是，项目创建工作正常，但项目删除必须以不同方式实现（因为我不希望所有项目都使用按钮删除，按钮应该只删除其各自的项目）。我的每个班级中都有deleteItem: React.PropTypes.func.isRequired作为propType，但我不确定这是否正确。

首先我有我的Item.jsx类的render和onDelte方法，我在这里渲染'Items'，包括他们的'Delete'（Eliminar）按钮：

    onDelete(item){
    e.preventDefault();
    deleteItem(item);
}
render(){
    const {item} = this.props;
    return(
        <li>
            <a onClick={this.onClick.bind(this)}>
                {item.name}
            </a><br/>
            <a onClick={this.onClick.bind(this)}>
                {item.price}
            </a><br/>
            <a onClick={this.onClick.bind(this)}>
                {item.donation}
            </a><br/>
            <a onClick={this.onClick.bind(this)}>
                {item.image}
            </a><br/>
            <form onSubmit = {this.onDelete.bind(this)}>
                <input type = "submit" value = "Eliminar"/>
            </form>
        </li>
    )
}

然后我们有App.jsx的方法：

  deleteItem(item){
  const newState = this.state.items;
  if (newState.indexOf(item) > -1) {
     newState.splice(newState.indexOf(item), 1);
     this.setState({items: newState})
  }

  render(){
return(
  <ItemSection
    items = {this.state.items}
    addItem = {this.addItem.bind(this)}
    setItem = {this.setItem.bind(this)}
    deleteItem = {this.deleteItem.bind(this)}
  />
)

然后，ItemForm和ItemList是ItemSection导入的类。 ItemSection呈现包含deleteItem在内的所有proptypes的div。

最后这里是ItemList的渲染方法：

    render(){
    return(
        <ul>{
            this.props.items.map(itm =>{
                return <Item
                    item = {itm}
                    key = {itm.id}
                    setItem = {this.props.setItem}
                    deleteItem = {this.props.deleteItem}
                />
            })
        }</ul>
    )
}

渲染文件时发生的事情是我收到了未捕获的错误（并且无法读取它是什么，因为它会立即在我的开发人员控制台中消失）然后重新启动应用程序。

Answer 1

当调用表单的onSubmit方法时，它首先尝试以旧式方式提交表单。而不是定义自己的方法并防止默认行为（在您的代码中，传递给deleteItem的第一个参数是事件，而不是项目），我建议只使用一个按钮，如下所示：

<button onClick = {() => this.props.deleteItem(this.props.item}>Submit</button>

如果您不想，可以将onSubmit上的表单更改为此类

<form onSubmit = {event => this.onDelete(event, item)}>

和onDelete方法

onDelete(e, item) {
  e.preventDefault();

  this.props.deleteItem(item):
}

同样如前所述，const newState = this.state.items只返回一个引用，您可以使用spread运算符来获取新副本

const newState = { ...this.state.items }

Answer 2

我认为问题可能出在您deleteItem(item);的{{1}}。你需要说item.jsx。

此外，在同一方法中，您正在执行this.props.deleteItem(item);并且e.preventDefault()甚至没有通过。因此，将e传递给您的方法以使用它。

在这一行e中，你得到的是同样的状态引用，而不是返回一个新的变异，以及使用const，当你在同一个方法中改变它时，它用于常量。我建议你const newState = this.state.items;做一个新的副本。

在这里let newState = this.state.items.slice();，您可以将索引分配给变量，因为您在方法中使用了两次。

如何在多个类中删除ReactJS中的项目？

2 个答案: