javascript - 对于每辆车点击我需要在浏览器中显示车名

Question

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

  • 我以为我会在 react 中使用类似于 js 的 e.target.innerText
  • 但它不工作。
  • 使用 map 我能够迭代数组。
  • 但我不确定如何实现点击事件。
  • 我是在使用 useState correclty 来设置车名吗
  • 在下面提供我的代码片段和沙箱。

  https://codesandbox.io/s/upbeat-ptolemy-su53h

  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(event)}>{eachCarName}</h1>
      </div>

标签： javascripthtmlcssreactjsredux

Answer 1

我觉得你对 onClick 有一些问题，这里是我的示例代码

代码沙盒： https ://codesandbox.io/s/elated-field-3wj2x

代码：

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);