Question

这是我的组件。我试图做一个删除按钮，向服务器发送一个DELETE请求。我正在苦苦挣扎的是，如何将帖子的ID传递给handleDelete() ？

import React from 'react';
import client from '../../api/';
import { Button } from 'reactstrap'
class Post extends React.Component {


  constructor(props) {
    super(props)
    this.id = props.id
  }

  handleDelete(event) {
    console.log(event);
    alert(event.id);
    event.preventDefault()
    }

    render() {
      return (
        <div>
          <h1>Title: {this.props.title} {this.props.id}</h1>
          <p>{this.props.body}</p>
          <Button id={this.props.id} onClick={this.handleDelete} color="danger">Delete</Button>
        </div>
      )}
}

export default Post

Answer 1

使用this.props.id并使用arrow函数重写handleDelete函数以保存组件上下文

handleDelete=(event) => {
    console.log(event);
    alert(this.props.id);//here is post id
    event.preventDefault()
}

Answer 2

将函数传递给onClick处理程序

<Button id={this.props.id} onClick={() => this.handleDelete(this.props.id)} color="danger">Delete</Button>

Answer 3

这应该可以解决问题：

constructor(props) {
  super(props)
  this.handleDelete = this.handleDelete.bind(this)
}

handleDelete(event) {
  console.log(event)
  alert(this.props.id)
  event.preventDefault()
}

如何在React中使用按钮传递ID？

3 个答案: