為什么我的按鈕使用 React-icon 組件時返回值會發生變化？

Question

我想刪除一個列表，並用圖標設置該按鈕的樣式。 如果我只是將“刪除”作為我的按鈕，我的 onClick 會按預期返回 ID。 但是，當我嘗試為我的按鈕使用組件時，它返回一個奇怪的 object。

我嘗試使用不同的元素而不是<Button/>和不同的圖標庫，但它會導致相同的行為。 這就是我導入組件的方式，如果這很重要，我將使用 styled-components。

import React from "react";
import { Draggable } from "react-beautiful-dnd";
import {BsXCircle} from "react-icons/bs"
import styled from 'styled-components'

下面是用於呈現列表標題的組件的代碼，以及用於刪除列表的按鈕：

<div
   {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}> 
    <div value={props.list._id} onClick = {props.handleListSelect} className="list"> 
        <button  value={props.list._id} onClick={props.handleDeleteList} >                          
            <BsXCircle/>           
        </button>
        {props.list.title}                        
    </div>
</div>

下面的代碼片段按預期工作。

<button  value={props.list._id} onClick={props.handleDeleteList} >                          
    delete         
</button>

我的 props.handleDeleteList function 如下：

const deleteList = async (e) =>{
   console.log(e.target.value)
}

如果我使用<BsXCircle/> ，我的控制台日志是這樣的：

{stringValue: '"undefined"', valueType: 'string', kind: 'ObjectId', value: 'undefined', path: '_id', …}

我很困惑為什么會這樣。

我傳遞的值不是分配在按鈕的 value 屬性中嗎？ 為什么渲染組件而不是文本會更改按鈕的值？

我已經簡化了我的代碼只是為了問這個問題。

Answer 1

首先， <button/>元素應該只接受某些類型的嵌套元素： MDN ref

允許的內容 短語內容，但不得有交互式內容

也就是說，您的問題是<button/>的嵌套元素繼承了它的事件偵聽器，因此當您嵌套 react-icon 組件（我猜是<svg> ）並單擊按鈕時，您基本上是在調度 click 事件在 svg 而不是<button/>上。 您可以通過簡單的 css 修復解決此問題：

button > * {
  pointer-events: none;
}

這樣，您將禁用按鈕子級上的所有事件偵聽器，並且應該修復它。