javascript - 调用父函数的子组件上的 event.preventDefault - React Js

Question

我并没有解释我的整个代码结构。这是我目前的情况。我在父组件内的子组件中添加了一个方法:

<TableRow obj={object} key={i} delteMethod={that.deleteRow} />

我的子组件定义如下:

<a href="#" onClick={this.props.delteMethod.bind(this, this.props.obj.id)}>Delete</a>

这是我在父组件中的 deleteRow() 函数:

deleteRow(deleteid) {
      var that = this;
      deleteItem(deleteid).then(function(data){
        that.loadData();
      });
    }

这行得通。我能够在我的父组件中取回 obj.id，并且我正在完成其余的任务。我想做的是，我想向“删除”按钮单击添加一个 event.preventDefault() 函数(我说的子组件按钮已经可以正常工作)。如何实现？

Answer 1

您可以在您的子组件中定义一个函数，该函数将接收 event 并从 props 调用您父组件的函数。以下是您的子组件的示例代码:

constructor(props) {
    super(props);
    this.onDeleteClick = this.onDeleteClick.bind(this);
}
onDeleteClick(event) {
    event.preventDefault();
    this.props.delteMethod(this.props.obj.id);
}
render() {
    return (<a href="#" onClick={this.onDeleteClick}>Delete</a>);
}