如何獲取我的onClick輸出并將其放在卡片上？

如果我從這里有一個控制臺輸出：

const PeriodicTable = () => {
  
  
  return (
    <div layout className="periodic-table">
      {data.elements.map((element) => (
        <button
          className="element"
          key={element.name}
          onClick={()=> {console.log(element)}}
          style={{
            gridRow: element.ypos,
            gridColumn: element.xpos,
            borderColor: colorMap[element.category],
          }}

因此，當我單擊元素周期表上的元素時，console.log(element) 是 JSON 檔案中元素資料的輸出。我想要的只是獲取輸出并將其列印到 html 標簽上。我已經嘗試過 document.write() 方法但無濟于事。

uj5u.com熱心網友回復：

也許您可以將該值從按鈕傳遞給父組件的狀態，然后將其傳遞給卡片組件

假設你有這樣的 json

const data = {
  elements: [
    {
      name: "steve",
      ypos: 1,
      xpos: 1,
      color: "red"
    },
    {
      name: "james",
      ypos: 2,
      xpos: 2,
      color: "red"
    }
  ]
};

和 PeriodicTabel 看起來像這樣

const PeriodicTable = (props) => {
  return (
    <div className="periodic-table">
      {data.elements.map((element, id) => (
        <button
          key={id}
          className="element"
          onClick={() => props.handleOnCLick(element)}
          style={{
            width: "100px",
            gridRow: element.ypos,
            gridColumn: element.xpos,
            borderColor: element.color
          }}
        >
          click me
        </button>
      ))}
    </div>
  );
};

然后在應用程式組件中，您可以制作 handleOnclick 以使其成為 PeridocTable 組件上的道具

export default function App() {
  const [val, setVal] = useState({});
  const handleOnCLick = (val) => {
    setVal(val);
  };

  return (
    <div className="App">
      <PeriodicTable handleOnCLick={handleOnCLick} />
      <Card value={val} />
    </div>
  );
}

因此在應用程式組件中，您可以設定狀態以接受來自 PeriodicTable 組件按鈕的值

const [val, setVal] = useState({});

然后你可以把它傳給卡

 <Card value={val} />

卡片組件將如下所示

const Card = (props) => {
  return (
    <div
      className="card"
      style={{
        width: "200px",
        background: "red",
        height: "250px",
        margin: "0 auto"
      }}
    >
      <h2>title card</h2>
      <p>{props.value.name}</p>
    </div>
  );
};

這是源代碼的最終結果

import { useState } from "react";
import "./styles.css";

const data = {
  elements: [
    {
      name: "steve",
      ypos: 1,
      xpos: 1,
      color: "red"
    },
    {
      name: "james",
      ypos: 2,
      xpos: 2,
      color: "red"
    }
  ]
};

const Card = (props) => {
  return (
    <div
      className="card"
      style={{
        width: "200px",
        background: "red",
        height: "250px",
        margin: "0 auto"
      }}
    >
      <h2>title card</h2>
      <p>{props.value.name}</p>
    </div>
  );
};

const PeriodicTable = (props) => {
  return (
    <div className="periodic-table">
      {data.elements.map((element, id) => (
        <button
          key={id}
          className="element"
          onClick={() => props.handleOnCLick(element)}
          style={{
            width: "100px",
            gridRow: element.ypos,
            gridColumn: element.xpos,
            borderColor: element.color
          }}
        >
          click me
        </button>
      ))}
    </div>
  );
};

export default function App() {
  const [val, setVal] = useState({});
  const handleOnCLick = (val) => {
    setVal(val);
  };

  return (
    <div className="App">
      <PeriodicTable handleOnCLick={handleOnCLick} />
      <Card value={val} />
    </div>
  );
}

鏈接到代碼沙箱中的預覽

標籤：css反应json

上一篇：異步更改redux狀態

下一篇：在反應JSX中的大括號內顯示括號