Javascript 如何使用onClick获取数组？

我想用onClick获得一个特定的数组，但结果总是未定义的。 如果解释不清楚，请告诉我。我会修好的！谢谢 这是密码

const chartType=[“线”、“条”、“饼”、“雷达”、“甜甜圈”、“气泡”]；
常量getType=（e）=>{
如果（如currentTarget==“行”）{
console.log（“真”）；
}
};
const typeList=chartType.map（（图表）=>(
{chart}
));

您的

onClick

实际上正在抓取html元素，这就是为什么您没有得到任何匹配项，当您单击特定的

h1

时，它返回

Foo

。要获得正确的目标，您需要

e.currentTarget.innerText

。另外，由于您使用的是React，请在迭代项中添加一个唯一的

键
属性。
一旦单击事件发生，它就会触发（您可以在使用getType函数中的
console.log（e）
时看到它）。如果要传递自定义参数，应按照以下示例进行操作：

  const chartType = ["Line", "Bar", "Pie", "Radar", "Doughnut", "Bubble"];
  const getType = (type) => {
    if (type === "Line") {
      console.log("true");
    }
  };
  const typeList = chartType.map((chart) => (
    <div>
      <h1 onClick={() => getType(chart)}>{chart}</h1>
    </div>
  ));

const chartType=[“线”、“条”、“饼”、“雷达”、“甜甜圈”、“气泡”]；
常量getType=（类型）=>{
如果（类型=“行”）{
console.log（“真”）；
}
};
const typeList=chartType.map（（图表）=>(
getType（图表）}>{chart}
));
e.currentTarget
返回整个标记，例如，您将获得

<h1>Line</h1>

行

相反，您可以做的是将图表作为参数传递给getType

const getType = (chart) => {
    if (chart === "Line") {
      console.log("true");
    }
  };

  const typeList = chartType.map((chart) => (
    <div>
      <h1 onClick={() => getType(chart)}>{chart}</h1>
    </div>
  ));

const getType=（图表）=>{
如果（图表=“线”）{
console.log（“真”）；
}
};
const typeList=chartType.map（（图表）=>(
getType（图表）}>{chart}
));
如果要更改图表类型，可以使用
useState
挂钩存储活动状态

编辑：我将
target.textContent
更改为
target.dataset.chartType
，并将名为
数据图表类型
的数据属性添加到每个
。这比使用渲染文本更安全


const{useState}=React；
常量图表类型=[‘线’、‘条’、‘饼’、‘雷达’、‘甜甜圈’、‘气泡’]；
常量图表类型列表=（道具）=>{
const{activeType，handleSelect}=props；
返回(
{ChartTypes.map（（chartType）=>(
{chartType}
))}
);
};
常量应用=（）=>{
const[activeType，setActiveType]=useState（null）；
常量handleSelect=（{target}）=>{
setActiveType（target.dataset.chartType）；
log（`Changed type:${target.dataset.chartType}`）；
};
返回(
);
};
render（，document.getElementById（'react'）
.as控制台包装{最大高度：4em！重要；}
.App>.ChartTypeList{
显示：网格；
网格模板列：重复（3，1fr）；
证明内容：中心；
对齐项目：居中；
}
.图表类型列表h1{
颜色：灰色；
字号：1em；
字体：斜体；
文本对齐：居中；
}
.ChartTypeList h1：悬停{
颜色：蓝色；
文字装饰：下划线；
光标：指针；
}
.ChartTypeList h1.active{
颜色：未设置；
字体样式：未设置；
}

您所说的未定义是什么意思？你能粘贴完整的代码吗。另外，当您执行console.log（e.currentTarget）时会得到什么？很抱歉，我从另一个得到了正确的答案！非常感谢您抽出时间回答！天哪，非常感谢你！！我解决了这个问题，现在我将添加一个独特的
键
道具！先生，我还有一件奇怪的事，为什么我必须添加一个唯一的
键
？？我一直在想你为什么加上它。如果你有时间回答，请随意！为了避免控制台中的反应抱怨，请不要使用
innerText
，因为它的性能很高（CSS也是如此）。只要坚持使用
textContent
。天哪，非常感谢你！！你们帮了我大忙！哦，这是另一个很好的解决方案！！非常感谢你！！非常感谢你！！天啊！这就是我现在想做的！！非常感谢你@KYUN解决这个问题的最好办法是分而治之。将您的组件设计为小型积木。非常感谢@KYUN请参阅我的编辑以获得更好的方法。