为什么在我的按钮使用 React-icon 组件时 return 值会改变？

Question

我想删除一个列表，并为该按钮设置图标样式。如果我只是将“删除”作为我的按钮，我的 onClick returns 将按预期显示 ID。然而，当我尝试为我的按钮使用一个组件时，它 returns 一个奇怪的 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函数如下：

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

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

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

我很困惑为什么会这样....

我传递的值不是在我按钮的值属性中指定的吗？为什么呈现组件而不是文本会更改我的按钮的值？

为了问这个问题，我简化了我的代码。我将不胜感激任何反馈，即使是关于改进提问的方法。提前谢谢你:)

Answer 1

首先，<button/> 元素应该只接受特定类型的嵌套元素：MDN ref

Permitted content Phrasing content but there must be no Interactive content

也就是说，你的问题是 <button/> 的嵌套元素继承了它的事件侦听器，所以当你嵌套 react-icon 组件（我猜是 <svg> ），然后点击按钮，您基本上是在 svg 上而不是在 <button/> 上调度 click 事件。您可以通过简单的 css 修复来解决此问题：

button > * {
  pointer-events: none;
}

这样您就禁用了按钮子项上的所有事件侦听器，它应该会修复它。

为什么在我的按钮使用 React-icon 组件时 return 值会改变？

Why does the return value change when using React-icon component for my button?

javascript

reactjs

jsx

react-beautiful-dnd