编辑列表的特定元素以与打字稿反应

Question

我正在使用编辑和删除按钮在后端快速运行时创建反应项目列表。我现在正在处理编辑按钮，并希望在按下按钮后在控制台上显示特定元素的 id，而不是 Displaying Id 它显示为空白。

I have tried putting other element but none works

/category.tsx

import React, { Component } from 'react'
import {NavLink} from 'react-router-dom'
import { ReactComponent } from '*.svg';
import {showitems} from './userfunctions'
const mystyles = {
    color:'white',
    display:'inline-block'
  } as React.CSSProperties;

interface catprops{}

/主类

export class category extends Component<catprops,any> {
    constructor(props:catprops){
        super(props);
        this.state={
            tableData: [],
            sno:0,
            id:''
        }
        this.handleclick= this.handleclick.bind(this); //for binding the button with particular id
    }
    componentDidMount(){
        showitems().then(res=>{
            if(res==null)
            {
                console.log("not found");
            }
            else
            this.setState({tableData:res});
        })

    }

//处理onclick事件的主句柄函数

    handleclick =(e:any) =>{
        this.setState({[this.state.id]: e.target.value});
        console.log(this.state.id);
    }

/渲染函数

    render() {
        return (
            <div>
                <table className="table">
                    <thead className="thead-dark">
                    <tr>
                    <th>S.no</th>
                    <th>Category Name</th>
                    <th>Description</th>
                    <th>Created On</th>
                    <th>Action</th>

//数据渲染表

                    </tr> </thead>
                    {
                        this.state.tableData.map((res:any,index:any) =>
                    <tr>
                        <td>{index+1}</td>
                        <td>{res.cname}</td>
                        <td>{res.description}</td>
                        <td>{res.created_on}</td>
                        <td><button value={res._id} onClick={this.handleclick}>Edit</button> //this button 
<button>Delete</button></td>
                    </tr>
                    )
                    }
                </table>
            </div>
        )
    }
}

export default category

//期望

I am expecting the Id on the console but it is showing blank on console because I have initialized it as blank.

我期待控制台上的 ID，但它在控制台上显示为空白，因为我已将其初始化为空白。

Answer 1

这应该可以

    handleclick = (e:any) =>{
        this.setState({id: e.target.value}, () => {
           console.log(this.state.id);
        });
    }