React - 映射按鈕上的事件處理

Question

請一些初學者幫助。

我有一個簡單的學習 React 應用程序，我在其中映射數組並根據數組中的項目創建一些單獨的卡片。

const list = [
  {
    id: 1,
    title: "Mario World",
    Platform: "SNES",
    year: 1992,
    text:
      "Super Mario World is a 1990 side-scrolling platform game developed and published by Nintendo for the Super Nintendo Entertainment System (SNES). ",
  },
  {
    id: 2,
    title: "Sonic the Hedgehog",
    Platform: "Megadrive",
    year: 1991,
    text:
      "Sonic the Hedgehog[a] is a platform game developed by Sonic Team and published by Sega for the Sega Genesis home video game console. ",
  },
];

export default list;

import React from "react";

class GameList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showText: false };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick = (id) => {
    console.log(id);
    this.setState({ showText: !this.state.showText });
  };
  render() {
    const listItems = this.props.list.map((item) => (
      <div className="card" key={item.id}>
        <span className="title">{item.title}</span>
        <span>
          <span role="img" aria-label="emoji">
            🎮
          </span>
          {item.Platform}
        </span>
        <span role="img" aria-label="emoji">
          📅 {item.year}
        </span>
        <button
          id={item.id}
          type="button"
          onClick={(e) => this.handleClick(item.id, e)}
        >
          Info {item.id}
        </button>
        {this.state.showText && <p>{item.text}</p>}
      </div>
    ));
    return <div className="container">{listItems}</div>;
  }
}

export default GameList;

我添加了一個按鈕，我想在單擊時顯示一些額外的文本，特定於數組中的 object。 我設法添加了按鈕，但是當我單擊它時，它會切換所有數組項文本，而不是特定於 object 的文本。我有按鈕來 console.log 個人 ID，但我不知道如何讓它只切換具體的文字，而不是一切。

謝謝

Answer 1

所有動態呈現的按鈕都使用 showText 的 boolean 值，因此它們要么顯示文本，要么不顯示文本

這里的解決方案是將按鈕的id保留在showText中。 如果您希望一次只為一個按鈕顯示額外的文本，請維護一個字符串或維護一個數組。

import React from "react";

class GameList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showText: ''};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick = (id) => {
    console.log(id);
    this.setState({ showText: id });
  };
  render() {
    const listItems = this.props.list.map((item) => (
      <div className="card" key={item.id}>
        <span className="title">{item.title}</span>
        <span>
          <span role="img" aria-label="emoji">
            🎮
          </span>
          {item.Platform}
        </span>
        <span role="img" aria-label="emoji">
          📅 {item.year}
        </span>
        <button
          id={item.id}
          type="button"
          onClick={(e) => this.handleClick(item.id, e)}
        >
          Info {item.id}
        </button>
        {(this.state.showText === item.id) && <p>{item.text}</p>}
      </div>
    ));
    return <div className="container">{listItems}</div>;
  }
}

export default GameList;

Answer 2

也許在這里您可以創建一個新的Card組件，它擁有自己的 state 這樣每張Card都可以自己顯示（或不顯示）文本。

這是一個例子。 我使用 React Functional Components + Hooks編寫它，因為我認為語法更易於使用，而且這里似乎不需要處理復雜的生命周期：

import React, { useState } from 'react';

const Card = ({ item }) => {
  const [shouldShowText, setShouldShowText] = useState(false);

  return (
    <div className="card">
      <span className="title">{item.title}</span>
      <span>
        <span role="img" aria-label="emoji">
          🎮
        </span>
        {item.Platform}
      </span>
      <span role="img" aria-label="emoji">
        📅 {item.year}
      </span>
      <button
        id={item.id}
        type="button"
        onClick={(e) => setShouldShowText(!shouldShowText)}
      >
        Info {item.id}
      </button>
      {shouldShowText && <p>{item.text}</p>}
    </div>
  );
};

const GameList = ({ list }) => {
  return (
    <div className="container">
      {list.map((item) => (
        <Card key={item.id} item={item} />
      ))}
    </div>
  );
};

export default GameList;