React - 使用 react-bootstrap 将 onClick 分配给同一行表的某个 td

Question

我正在为购物车 crud 制作一个带有 react-bootstrap 的表格，一组特定的 td 有一个分配的 onClick，它打开该产品的配置，以及它们各自的值。

const dispatch = useDispatch();
const [handleConfigModal, setHandleConfigModal] = useState({
show: false, 
id:'', 
amount: 0,
})

const hadleModalAmount = ( id, amount, price) =>{
setHandleConfigModal({
show: true,
id,
amount: Number(amount),
price: Number(price) 
})
}

return (
<div className="d-flex flex-column gap-3">
<Table striped bordered hover className="mb-0">      
<tbody>
    {   
    cart?.map( ({ id, product, price, amount }) => (
    <tr className="text-center" key={ id }>
    <td onClick={ () => hadleModalAmount() } > ...</td>                    
    <td onClick={ () => hadleModalAmount() } > ...</td>
    <td onClick={ () => hadleModalAmount() } > ...</td>
    <td>
        <Button
            variant="outline-dark"
            onClick={ () => dispatch( deleteProduct(id) ) }
        >
            <AiFillDelete/>
        </Button>
    </td>
    </tr>
    ))
    }
</tbody>
</Table>

{
(cart.length > 0) 
?(
    <div className="d-flex justify-content-center">
    <Button
    variant="outline-dark"
    onClick={ () => dispatch( clearProducts() ) } 
    >
    <AiFillDelete/> Clear Cart
    </Button>
    </div>
) 
: null
}

<ModalCart
{...handleConfigModal}
setHandleConfigModal={setHandleConfigModal}
/>
</div>
)

主要是我想把那些td包在一个div中，然后把onClick分配给那个div，但是js告诉我这是不可能的，我想知道是否有办法将一个onClick分配给一个特定的td组无需为每个单元格分配一个 onClick 并且无需在两者之间创建太多代码，我感谢您的帮助。

错误

Ract_devtools_backend.js:2655 Warning: validateDOMNesting(...): <td> cannot appear as a child of <div>.
    at td
    at div
    at tr
    at tbody
    at table

Answer 1

所有这些

<td>

已经包裹在一个

<tr>

中，您可以将其应用

onClick

您真的不需要将它们包裹在一个

div

中：

<tr className="text-center" key={ id } onClick={() => hadleModalAmount(id, amount, price)}>
  <td> ... </td>                    
  <td> ... </td>
  <td> ... </td>
</tr>