Javascript 单击链接即可删除子组件

我现在正在自学react，我有一个组件可以查看状态，当添加一个新项时，它会将一个子组件附加到自身。我现在要做的是通过单击删除添加的子组件。然而，我似乎无法使链接的自然事件停止，如果我这样做，即preventDefault，我得到preventDefault不是未定义的函数

下面是我的代码

    import React, { Component } from 'react';
import InvoiceForm from './InvoiceForm';
import InvoiceItemForm from './InvoiceItemForm';

class GenerateInvoice extends Component {

  constructor(props) {
    super(props);
    this.state = {
      invoice: {
        items : []
      }
    };

    this.onAddChild = this.onAddChild.bind(this);
    this.removeItem = this.removeItem.bind(this);
  }

  render() {
    const children = [];
    for (var i = 0; i < this.state.invoice.items.length; i += 1) {
      children.push(
        <InvoiceItemForm 
          key={i} 
          number={i}
          remove={this.removeItem} />
      );
    }
    return(
      <div>
        <a href="" onClick={this.onAddChild}>Add New Item</a>
        {children}
      </div>
    )
  }

  removeItem = (e, itemIndex) => {
    e.stopPropagation();
    alert("..removing...");
    // let invoice = this.state.invoice;
    // let updatedItems = this.state.invoice.items.splice(index, 1); //remove element
    // let updateInvoice = { ...invoice, items:updatedItems}
    // this.setState({ invoice }); //update state
  }

  onAddChild = (e) => {
    e.preventDefault();
    let invoice = this.state.invoice;
    // creates an updated version of the items without changing the original value
    let updatedItems = invoice.items.push({ 'id': 'INV001' });
    // creates a new version of the invoice with the updated items
    let updateInvoice = { ...invoice, items: updatedItems };
    // update the invoice on the state to the new version
    this.setState({ invoice });
  }


}

导出默认生成文件

子组件

    import React from 'react';

const InvoiceItemForm = (props) => {
  console.log(props);
  return(
    <div>
      <p>Hello {props.number}</p>
      <a href="" onClick={props.remove(props.number)}>Remove</a>
    </div>
  )
}

export default InvoiceItemForm;

还有我的沙盒的链接

在InvoiceItemForm组件上，onClick={props.removeprops.number}，只有在这里才有对事件对象的引用

您可以更改为以下内容：

onClick={(e) => {
  e.preventDefault();
  props.remove(props.number);
}}

class InvoiceItemForm extends React.Component {
  handleClick = (e) => {
    e.preventDefault();
    this.props.remove(props.number);
  }

  render() {
    console.log(this.props);
    return(
      <div>
        <p>Hello {this.props.number}</p>
        <a href="" onClick={this.handleClick}>Remove</a>
      </div>
    )
  }
}

编辑：

如果希望避免在每次渲染时创建函数，可以使用以下方法：

onClick={(e) => {
  e.preventDefault();
  props.remove(props.number);
}}

class InvoiceItemForm extends React.Component {
  handleClick = (e) => {
    e.preventDefault();
    this.props.remove(props.number);
  }

  render() {
    console.log(this.props);
    return(
      <div>
        <p>Hello {this.props.number}</p>
        <a href="" onClick={this.handleClick}>Remove</a>
      </div>
    )
  }
}

---

您应该将要删除的项的索引直接绑定到removeItem方法

重构渲染方法：

render() {
  return(
    <div>
      <a href="" onClick={this.onAddChild}>Add New Item</a>
      {this.state.invoice.items.map((item, index) => {
        return (
          <InvoiceItemForm
            key={index}
            number={index}
            remove={this.removeItem.bind(null, index)}
          />
        );
      })}
    </div>
  );
}

最后是子组件中的超级简单事件处理：

<a href="" onClick={props.remove}>Remove</a>

---

尽管我将使用一个元素来完全删除整个默认事件处理和传播。应该专门用于导航内容。

这可能是我感到困惑的地方。这是否会在每次重新渲染时创建一个新函数，因此效率低下？你是对的。请参阅我的编辑。我必须说，在我看来，创建一个新的功能，每个渲染不是那么糟糕，避免它是一个微观优化。