英文:
Cant get button value when clicked the icon inside button in react js
问题
我正在尝试获取按钮的值。这是我的按钮：
<button
className="toggle__btn"
value={el._id}
onClick={toggle}
>
<i className="fa-solid fa-circle-info fs-4"></i>
</button>
这是我的函数：
const toggle = (event) => {
const id = event.target.value;
console.log(id);
};
问题是，当我点击图标时，我无法获取值，但是当我点击图标以外的地方，但仍然在按钮内部（图标外部有空白区域）时，我可以获取值。我希望即使点击图标时也能返回id。应该如何做？为什么会发生这种情况？
英文:
So Im trying to get the value from a button. This my button:
<button
className="toggle__btn"
value={el._id}
onClick={toggle}
>
<i className="fa-solid fa-circle-info fs-4"></i>
</button>
This my function:
const toggle = (event) => {
const id = event.target.value;
console.log(id);
};
The problem is I can't get the value if I click the icon, but I can when I click outside the icon but still inside the button(there is blank space outside the icon). I want it to return the id even when the icon is clicked. How to do so? Why does this happen?
答案1
得分: 1
currentTarget 与 target 不同，即使事件冒泡到父元素，currentTarget 在整个事件传播过程中保持不变。它始终引用事件侦听器附加到的元素。
您可以尝试使用 currentTarget 来引用附加了事件的元素。这将从按钮元素中检索 id，无论您单击图标还是按钮内的空白空间。
const toggle = (event) => {
const id = event.currentTarget.value;
console.log(id);
};
英文:
Unlike target, currentTarget remains the same throughout the event propagation, even if the event bubbles up to a parent element. It always refers to the element that the event listener was attached to.
You can try using currentTarget to refer the element that attached the event. This will retrieve the id from the button element, whether you click on the icon or the blank space inside the button.
const toggle = (event) => {
const id = event.currentTarget.value;
console.log(id);
};
答案2
得分: 1
尝试
const toggle = (event) => {
const id = event.currentTarget.value;
console.log(id);
};
> event.currentTarget 告诉我们事件附加在哪个元素上，或者是触发事件监听器的元素。
> event.target 告诉我们事件开始的地方。
参见 https://medium.com/@etherealm/currenttarget-vs-target-in-js-2f3fd3a543e5
英文:
try
const toggle = (event) => {
const id = event.currentTarget.value;
console.log(id);
};
> event.currentTarget tells us on which element the event was attached or the element whose eventListener triggered the event.
> event.target tells where the event started.
See https://medium.com/@etherealm/currenttarget-vs-target-in-js-2f3fd3a543e5
答案3
得分: 1
尝试在子元素上禁用指针事件：
<button ...>
<span className="icon">
<i className="..."></i>
</span>
</button>
在CSS文件中：
.icon {
pointer-events: none;
}
英文:
Try disabling pointer events on the child:
<button ...>
<span className="icon">
<i className="..."></i>
</span>
</button>
in the css file:
.icon {
pointer-events: none;
}
答案4
得分: 0
请使用 currentTarget
const App = () => {
const toggle = (event) => {
const id = event.currentTarget.value;
console.log(id);
};
return (
<div>
<button value="test val" onClick={toggle}>TEST</button>
</div>
)
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="root"></div>
英文:
Please use currentTarget
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
const App = () => {
const toggle = (event) => {
const id = event.currentTarget.value;
console.log(id);
};
return (
<div>
<button value="test val" onClick={toggle}>TEST</button>
</div>
)
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
<!-- language: lang-html -->
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="root"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论