reactjs 如何在const对象中创建按钮?

9vw9lbht  于 2022-11-04  发布在  React
关注(0)|答案(1)|浏览(131)

我正在学习React.js,这是一个显示哪个用户拥有哪些项目的表。我希望每个项目都有一个按钮,并删除相应的项目。如何在常量对象中拥有或{FaTrash}图标?
下面是我的完整代码

const columns = [
    {
        name: "Username",
        selector: "username",
        sortable: true
    },
    {
        name: "Email",
        selector: "email",
        sortable: true
    },
    {
        name: "Item",
        selector: "items",
        sortable: true,
        right: true
    },
    {
        name: "Action",
        value: <button>Edit</button>
    }
]

const Admin = () => {
    const [data, setData] = useState(allUsers);

    const handleRowClicked = row => {
        const updatedData = data.map(item => {
            if (row.id !== item.id) {
              return item;
            }

            return {
              ...item,
              toggleSelected: !item.toggleSelected
            };
          });

          setData(updatedData);
    }

    return ( <>
        <div className='users p-5'>
            <DataTable 
                title="Users"
                columns={columns}
                data={data}
                defaultSortField="title"
                pagination
                onRowClicked={handleRowClicked}
            />
        </div>
    </> );
}

export default Admin;
9fkzdhlc

9fkzdhlc1#

我曾经传递一个函数,该函数返回一个带有句柄的布局

{
    name: "Action",
    actionRenderer: ({ index, item }) => {
      return (
       <button onClick={() => onhandle(item)}>
           ActionName <!--or icon component-->
       </button>
       )
    }
 },

然后你需要创建<DataTableRow>组件,它将呈现列数组中的每个对象。在<DataTableRow>的某个地方,你将能够访问actionRenderer和你的数据项:

<div>{actionColumn.actionRenderer({ index, item })}</div>

相关问题