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（）函数添加到＆＃39;删除＆＃39;按钮单击（我说已经工作正常的子组件按钮）。怎么做到这一点？

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>); }调用您的父函数。以下是您的子组件的示例代码：

std::function

Answer 2

您可以在组件类中使用单击处理函数，例如

clickHandler = (e) => {
  this.props.delteMethod(this.props.obj.id);
  e.preventDefault();
}

在按钮上你可以像

一样

<a href="#" onClick={this.clickHandler}>Delete</a>

正在调用父函数的子组件的event.preventDefault - React Js

2 个答案: