Javascript 对于每辆车单击，我需要在浏览器中显示车名

对于每辆车单击，我需要在浏览器中显示车名

• 我想我会在react中使用类似于js的e.target.innerText
• 但它不起作用
• 使用map，我能够迭代数组
• 但我不知道如何实现点击事件
• 我是否使用useState correclty设置汽车名称
• 在下面提供我的代码片段和sanbox

函数应用程序（）{
const[carbrand，setCarBrand]=useState（）；
let cars=[“本田”、“丰田”、“宝马”]；
让eachCarName=cars.map（name=>{
console.log（“name-->”，name）；
设carDiv={name}；
返心；
//返回名称；
});
log（“eachCarName-->”，eachCarName）；
const eachCarClick=e=>{
log（“eachCarClick-->”，e）；
log（“eachCarClick e.target.innerText-->”，e.target.innerText）；
};
//const setCarBrand=eachCarName；
//const carbrand=eachCarName；
返回(
{eachCarName}

以下是将为您完成这项工作的代码

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [carbrand, setCarBrand] = useState();
  let cars = ["honda", "toyota", "bmw"];
  let eachCarName = cars.map(name => {
    console.log("name--->", name);
    let carDiv = <div>{name}</div>;
    return carDiv;

    //return name;
  });

  console.log("eachCarName--->", eachCarName);
  const eachCarClick = e => {
    console.log("eachCarClick--->", e);
    console.log("eachCarClick e.target.innerText--->", e.target.innerText);
  };

  // const setCarBrand = eachCarName;
  // const carbrand = eachCarName;

  return (
    <div className="App">
      <h1 onClick={eachCarClick}>{eachCarName}</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React，{useState}来自“React”；
从“react dom”导入react dom；
导入“/styles.css”；
函数App（）{
const[carbrand，setCarBrand]=useState（）；
let cars=[“本田”、“丰田”、“宝马”]；
让eachCarName=cars.map（name=>{
console.log（“name-->”，name）；
设carDiv={name}；
返心；
//返回名称；
});
log（“eachCarName-->”，eachCarName）；
const eachCarClick=e=>{
log（“eachCarClick-->”，e）；
log（“eachCarClick e.target.innerText-->”，e.target.innerText）；
};
//const setCarBrand=eachCarName；
//const carbrand=eachCarName；
返回(
{eachCarName}
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render（
这里有一些问题，但功能上最大的问题是没有
innerText
属性-
e.target
将返回HTML元素，您需要从中获取
值
或
id
或任何您需要的属性。在下面的示例中，我称之为id

代码沙盒：

代码：

function App() {
  const [carbrand, setCarBrand] = useState('');
  let cars = ["honda", "toyota", "bmw"];

  return (
    <div className="App">
      {cars.map(carName => <h1 id={carName} onClick={e => setCarBrand(e.target.id)}>{carName}</h1>)}
      {carbrand && <p>you clicked: {carbrand}</p>}
    </div>
  );
}```

I opted for doing the mapping inline for simplicity.  There's no real issue either way but stylistically, for something so simple this would be my preference.

函数应用程序（）{
const[carbrand，setCarBrand]=使用状态（“”）；
let cars=[“本田”、“丰田”、“宝马”]；
返回(
{cars.map（carName=>setCarBrand（e.target.id）}>{carName}}
{carbrand&&您单击：{carbrand}
}
);
}```
为了简单起见，我选择了内联映射。这两种方式都没有真正的问题，但在风格上，对于如此简单的东西，这将是我的首选。
我觉得您在点击这里我的示例代码时遇到了一些问题

代码沙盒：

代码：

import React，{useState}来自“React”；
从“react dom”导入react dom；
导入“/styles.css”；
函数App（）{
const[carbrand，setCarBrand]=useState（）；
let cars=[“本田”、“丰田”、“宝马”]；
让每个carName=cars.map（（名称、索引）=>{
返回(
eachCarClick（e）}键={index}>
{name}
);
});
const eachCarClick=e=>{
setCarBrand（e.target.innerText）；
};
//const setCarBrand=eachCarName；
控制台日志（carbrand）；
返回(
{eachCarName}
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；
只是
{eachCarName}
…不要在html中调用eachCarClick函数，而是将其定义为eventhandler。然后在单击时将该事件自动插入为该函数的第一个参数。嘿，当我单击警报中看到的每个未定义的值时，你能告诉我如何在浏览器中显示这些值吗尝试以下操作：我忘了分叉sandbox-我将编辑上面的内容。如果这有助于您，请更新投票或标记正确。谢谢！单击后您将在浏览器中看到该值-该行显示“{carbrand&&您单击：{carbrand}
}”嘿，假设我有一万辆车，在每辆车或外部div上附加一个事件处理程序好吗，你能告诉我好的方法和如何实现吗，因为现在我们正在为每辆车附加。嘿，我尝试了你的代码，我遇到了错误嘿，我在控制台中看到了值，但是如何在浏览器中显示这些值，而不是传递click in h1我们可以传入outer div吗？这是最好的方法，在这里提供我更新的代码，以及为什么在onclick
onclick={e=>eachCarClick（e）}
之前传入e，你能解释一下这将帮助我理解吗
import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [carbrand, setCarBrand] = useState();
  let cars = ["honda", "toyota", "bmw"];
  let eachCarName = cars.map((name, index) => {
    return (
      <h1 onClick={e => eachCarClick(e)} key={index}>
        {name}
      </h1>
    );
  });

  const eachCarClick = e => {
    setCarBrand(e.target.innerText);
  };

  // const setCarBrand = eachCarName;
  console.log(carbrand);

  return (
    <div className="App">
      <div>{eachCarName}</div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);