для каждого клика машины мне нужно показать название машины в браузере

Question

• за каждый клик машины мне нужно показать название машины в браузере.

  • Я думал, что буду использовать e.target.innerText, аналогичный js, в реагировать
  • , но он не работает.
  • с помощью карты Мне удалось перебрать массив.
  • , но я не уверен, как добиться события щелчка.
  • яиспользуя useState correclty, чтобы задать имена автомобилей
  • , предоставив мой фрагмент кода и sanbox ниже.

  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>

Answer 1

Здесь есть несколько проблем, но с функциональной точки зрения самое главное - нет атрибута innerText - e.target вернет HTML-элемент, вам нужно получить value или id или любой другой атрибут, который вам нуженэтогоВ моем примере ниже я назвал его ID

codesandbox: https://codesandbox.io/embed/spring-mountain-1v8873222-wpl0d

code:

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.

Answer 2

Я думаю, у вас есть проблемы с onClick здесь мой пример кода

codesandbox: https://codesandbox.io/s/elated-field-3wj2x

code:

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

Answer 3

Вот код, который сделает всю работу за вас

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

Вот код и ящик, которые делают то, что вам нужно https://codesandbox.io/s/polished-cloud-fwj6h