从 JSON 数组反应 onClick 传递对象 ID答案

【问题标题】：React onClick pass object ID from a JSON array从 JSON 数组反应 onClick 传递对象 ID
【发布时间】：2019-02-20 19:46:40
【问题描述】：

我对 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>
    );
  }
}

请原谅代码效率低下。再说一次，我是新手。我只需要帮助将其加载到每部电影的新页面。任何帮助将不胜感激。

【问题讨论】：

标签： arrays reactjs

【解决方案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的变量，如果某些东西不是道具，请尽量避免将其命名为道具。

【讨论】：

感谢您的提示！ :)