我遇到以下情况,我想知道 indexOf 值以便稍后在代码中使用该知识。然而,我尝试了多种不同的方法来获得值(value),但我似乎没有得到正确的结果。在下面的代码中,我尝试了几种不同的搜索 Stackoverflow 的方法。到目前为止,所有这些都返回 -1,这意味着我的代码有问题或我目前无法找到的其他问题。
仅供引用,selectedGroup 是一个包含对象的数组,就像这样:
[{label: "somelabel", value: 100}]
可以有很多,具体取决于用户。
代码:
import React, { useState, useEffect } from 'react';
const GroupButtonMaker = ({ selectedGroup}) => {
const [newButtons, setNewButtons] = useState([]);
console.log(newButtons);
useEffect(() => {
const createButtons = () => {
setNewButtons(
selectedGroup.map(item => {
return (
<button
id={item.value}
className={'btn green micro'}
key={item.value}
onClick={event => btnHandler(event)}
>
{item.label}
</button>
);
})
);
};
createButtons();
}, [selectedGroup]);
const btnHandler = event => {
//here at the handler I'm trying multiple different ways to find indexOf as a test. No luck so far.
const eventID = event.currentTarget.id;
let currentTargetIndex = newButtons
.map(item => item.value)
.indexOf(eventID);
console.log(currentTargetIndex);
console.log(newButtons.findIndex(x => x.value === eventID));
};
Array.prototype.indexOfObject = function arrayObjectIndexOf(property, value) {
for (var i = 0, len = this.length; i < len; i++) {
if (this[i][property] === value) return i;
}
return -1;
};
// here i've hardcored one value as a test to see if it works but it didn't so far.
console.log(newButtons.indexOfObject('value', 107));
const idx = newButtons.reduce(function(cur, val, index, eventID) {
if (val.value === eventID && cur === -1) {
return index;
}
return cur;
}, -1);
console.log(idx);
return <ul>{newButtons.map(item => item)}</ul>;
};
export default GroupButtonMaker;
预先感谢您对我当前问题的任何建议。希望我已经设法以一种可以解决问题的方式描述问题。如果没有,请询问,我会尽力提供答案。
最佳答案
为什么不直接将按钮的 id
传递给处理程序,而不是从 event
中获取。
你可以这样实现:onClick={(event) => btnHandler(item.value)}
然后在您的 btnHandler
中,只需从 selectedGroup
而不是 newButtons
中查找所选按钮的索引。
在这里,试一试:
import React, { useState, useEffect } from "react";
const GroupButtonMaker = ({ selectedGroup }) => {
const [newButtons, setNewButtons] = useState([]);
useEffect(() => {
const buttons = selectedGroup.map(item => {
return (
<button
id={item.value}
className={"btn green micro"}
key={item.value}
onClick={(event) => btnHandler(item.value)}
>
{item.label}
</button>
);
});
setNewButtons(buttons);
}, [selectedGroup]);
const btnHandler = buttonId => {
const selectedButtonIndex = selectedGroup.findIndex(item => item.value === buttonId);
console.log("selectedButtonIndex is: ", selectedButtonIndex);
};
return <ul>{newButtons.map(item => item)}</ul>;
};
export default GroupButtonMaker;
Here's a Working Sample Code Demo for your ref.
关于javascript - 对象数组中的 indexOf 问题。 react 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59502141/