arrays - React onClick 从 JSON 数组传递对象 ID

Question

我对 React 和一般编码都很陌生。我有一个项目，我需要能够单击电影海报并让它打开一个新页面，在其中显示电影的详细信息。

下面是 JSON

[
    {
        "id": 1,
        "name": "The Matrix",
        "image": "/assets/images/posters/the_matrix.jpg"
    },
    {
        "id": 2,
        "name": "Jaws",
        "image": "/assets/images/posters/jaws.jpg"
    },
    {
        "id": 3,
        "name": "Jurassic Park",
        "image": "/assets/images/posters/jurassic_park.jpg"
    }
 ]

下面是我传递各个电影的组件

class LibraryCard extends Component {

  render () {
    return (
      <div>
        <div className="container">
          <div className="row">
              {films.map((props) => {
                // Returns film poster and title
                return <div onClick={() => props.handleUpdateFilm(props.id)}>
                    <a onClick={() => {window.location.href="filmdetails/" + props.name;}}><img src={props.image} alt={props.name} key={props.id}></img></a>
                    <h6>{props.name}</h6>
                  </div>
              })}
          </div>
        </div>
      </div>
    );
  }
}

卡片正在被传递到电影页面，其中显示电影的所有海报

const Films = () => (
        <div>    
            <LibraryCard />
        </div>
);

export default Films;

下面是详细信息页面，将显示所点击的每部电影的所有信息。

class Details extends Component {
  render() {
    return (
      <div><h1 align="center">This is a story...</h1>
        <div className="container">
            <div className="row">
              {Films.map(Film => <img src={Film.image} key={Film.id} id={Film.id} alt={Film.name} handleClick={this.handleClick} />)}
            </div>
        </div>
      </div>
    );
  }
}

请原谅代码的低效率。再说一遍，我对此很陌生。我只需要帮助将其加载到每部电影的新页面。任何帮助将不胜感激。

Answer 1

您在这里寻找的是柯里化(Currying)函数:

handleUpdateFilm = id => ev => {
    //Do whatever you want with the id variable here
}

该函数接受2组参数，第一次调用时，仅设置id，第二次调用时，将给出事件并执行其中的指令.

以下是如何在代码中使用和绑定(bind)它:

class LibraryCard extends Component {

    handleUpdateFilm = id => ev => {
        //Do whatever you want with the id variable here
    }

    render() {
        return (
            <div>
                <div className="container">
                    <div className="row">
                        {films.map(({ id, name, image }) => // Props deconstruction
                            <div onClick={this.handleUpdateFilm(id)}> //Your function binding
                                <a onClick={() => { window.location.href = "filmdetails/" + name; }}>
                                    <img src={image} alt={name} key={id}></img>
                                </a>
                                <h6>{name}</h6>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        );
    }
}

我还删除了代码中名为 props 的变量，如果某些东西不是 prop，请尽量避免将其命名为 props。