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

您在这里寻找的是一个咖喱函数：

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

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

这是您如何在代码中使用和绑定它：

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，请尽量避免将其命名为prop。

通过JSON数组对onClick传递对象ID进行反应

1 个答案: