如何使用useRef从映射列表中定位react组件

Question

我试图使几个按钮对应于键盘键，但我是相当新的React，我不知道如何针对这些元素，每个元素都有它的id，我可以访问事件键，但之后我迷路了，我已经尝试使用refs，但我没有找到一个例子，我可以使用或理解我如何能把它在我的代码内使用。这是我用来生成组件列表的对象数组:

const [bankOne,setBankOne] = React.useState([
{
keyCode: 81,
keyTrigger: "Q",
id: "Heater-1",
url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
},
{
keyCode: 87,
keyTrigger: "W",
id: "Heater-2",
url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3"
}]);

这是事件处理程序:

const handleKeyPress = React.useCallback((event) => {
//console.log(event.key.toUpperCase());
console.log(itemsRef.current)
}, []);
React.useEffect(() => {
document.addEventListener('keypress', handleKeyPress);
return () => {
document.removeEventListener('keypress', handleKeyPress);
};
}, [handleKeyPress]);

是我用来生成React组件的列表:

const bank1 = bankOne.map((item,i) => (
<button
ref={el => itemsRef.current[i] = item.keyTrigger}
id={item.id}
className="drum-pad"
value={item.keyTrigger}
onClick={handleClick}
onKeyPress={handleKeyPress}
>
<audio  src={item.url} className="clip" id={item.keyTrigger}>
<source src={item.url} type="audio/mp3" />
</audio>
{item.keyTrigger}
</button>
));

我不知道如何做到这一点，这就是为什么我没有发布任何我试图解决问题的方法，因为我知道他们都是错误的或其他方式。我真的很感激任何帮助，谢谢大家。

Answer 1

所以我知道我只需要一个useRef数组，然后我针对每个按钮在该数组的索引，也许不是最好的解决方案，但至少它工作。

const btnsRef = React.useRef([]);
const handleKeyPress = React.useCallback((event) => {
switch(event.key.toUpperCase()){
case "Q":
btnsRef.current[0].focus()
btnsRef.current[0].firstChild.load()
btnsRef.current[0].firstChild.play()
setData(prev => ({...prev,currentNote: btnsRef.current[0].id}))
break;
case "W":
btnsRef.current[1].focus()
btnsRef.current[1].firstChild.load()
btnsRef.current[1].firstChild.play()
setData(prev => ({...prev,currentNote: btnsRef.current[1].id}))
break;
}
}, []);

const component = obj.map((item,index) => (
<button
ref={(element) => btnsRef.current[index] = element}
id={item.id}
value={item.keyTrigger}
onKeyPress={handleKeyPress}
>
<audio className="clip" id={item.keyTrigger}>
<source src={item.url} type="audio/mp3" />
</audio>
{item.keyTrigger}
</button>
));