我想洗掉一個串列，并用圖示設定該按鈕的樣式。如果我只是將“洗掉”作為我的按鈕，我的 onClick 按預期回傳 ID。但是，當我嘗試為按鈕使用組件時，它會回傳一個奇怪的物件。
我嘗試使用不同的元素而不是 a<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', …}
我很困惑為什么會發生這種情況......
我傳遞的值不是在我的按鈕的 value 屬性中分配的嗎？為什么渲染組件而不是文本會更改按鈕的值？
我已經簡化了我的代碼只是為了問這個問題。我會很感激任何反饋，即使是關于改進提問的方法。先感謝您 ：）
uj5u.com熱心網友回復：
首先，<button/>元素應該只接受某些型別的嵌套元素：MDN ref
允許的內容 短語內容，但不得有互動式內容
也就是說，您的問題是嵌套的元素<button/>繼承了它的事件偵聽器，所以當您嵌套 react-icon 組件（<svg>我猜是一個）并單擊按鈕時，您基本上是在 svg 上而不是在<button/>. 您可以通過簡單的 css 修復來解決該問題：
button > * {
pointer-events: none;
}
這樣，您將禁用按鈕子級上的所有事件偵聽器，并且應該修復它。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/454835.html
標籤：javascript 反应 jsx 反应美丽的 dnd
下一篇：如何將前置加載div居中？