代码之家 › 专栏 › 技术社区 › cjm2671

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

reactjs

cjm2671 · 技术社区 · 7 年前

DELETE 请求服务器。我在挣扎的是, 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

3 回复 | 直到 7 年前

xehpuk 7 年前

这应该可以做到:

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

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

Igor Alemasow 7 年前

使用this.props.id和rewrite handledelite函数以及arrow函数保存组件上下文

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

Dmitriy 7 年前

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

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

6 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

6 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

6 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Luckkks · 过渡色工作不正常

6 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

6 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

6 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

6 月前

noblerare · Vite错误-未定义导出(SSR)

6 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

6 月前