Javascript 如何将特定listitem的引用传递给要在另一个组件中使用的onClick？

我有一个项目列表（用户项目），当单击一个项目时，它需要重定向到一个页面，用户可以在该页面编辑单击的项目（列表项目）

下面是我当前列出项目的方式

renderingElements() {

       ...
        else {


            // Array @projectInfo : Will have objects with info from each project user currently has (title,url,genre,description)
            const projectsInfo = this.state.projectsOfUser.map(project => {
                console.log('^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^', project);
                return {

                    videoID: project._id,
                    videoTitle: project.title,
                    videoURL: project.videoURL,
                    genre: project.genre,
                    description: project.description

                }

            });

             const listItems = this.state.projectsOfUser.map((project, i) =>
                <li key={i} className="project-list-container__list__list-items" onClick={this.goToDetailComponent.bind(this)} >

                    {/* Not changing mutating in state array */}
                    {/* Passes info to each component, info is from our array of of objects with video info */}
                    <Project projectObject={projectsInfo[i]} />

                </li>
            );

            return listItems;

        }

    }

---

我不太同意这种将数据传递给路由的方法，正确的方法应该是在路由器中设置动态路由，使用

match

param直接从ProjectDetail组件检索数据，并从globalState调用数据：

<Route path="Project/:ProjectId" />

---

我想你想要这样的东西。您也可以通过这种方式将数据/对象从一个组件传递到另一个组件

<button
  onClick={() =>
    this.props.history.push("/item", {
      id: 1,
      name: "test",
      otherData: "other data"
    })
  }
>
  Save
</button>

item.jsx

import React, { Component } from "react";
import { Link } from "react-router-dom";
class Home extends Component {
  state = {};
  render() {
    return (
      <div>
        <h1>this is home page</h1>
        <Link to="/item">List of item</Link>
        <button
          onClick={() =>
            this.props.history.push("/item", {
              id: 1,
              name: "test",
              otherData: "other data"
            })
          }
        >
          Save
        </button>
      </div>
    );
  }
}

export default Home;

import React, { Component } from "react";
class Item extends Component {

  render() {
    console.log(this.props.location.state);
    return (
        <h1>
          item: {this.props.location.state.name}{" "}
          {this.props.location.state.otherData}
        </h1>
    );
  }
}

export default Item;

import React，{Component}来自“React”；
类项扩展组件{
render（）{
log（this.props.location.state）；
返回(
项：{this.props.location.state.name}{”“}
{this.props.location.state.otherData}
);
}
}
导出默认项；

确保您在App.js中正确维护以下路线

App.js

import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./home";
import Item from "./item";

class App extends Component {

render() {
    return (
      <div>
        <Switch>
          <Route path="/item" component={Item} />
          <Route path="/" component={Home} />
        </Switch>
        </div>
    );
  }
}

export default App;

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "./index.css";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

serviceWorker.unregister();

import React，{Component}来自“React”；
从“react router dom”导入{Route，Switch}；
从“/Home”导入主页；
从“/Item”导入项目；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

index.js

import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./home";
import Item from "./item";

class App extends Component {

render() {
    return (
      <div>
        <Switch>
          <Route path="/item" component={Item} />
          <Route path="/" component={Home} />
        </Switch>
        </div>
    );
  }
}

export default App;

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "./index.css";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

serviceWorker.unregister();

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter}；
从“/App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
导入“/index.css”；
ReactDOM.render(
,
document.getElementById（“根”）
);
serviceWorker.unregister（）；

我在列表项上使用了一个箭头函数来获取单击时所需的信息，在本例中，这是唯一的项目对象。维克也有一个惊人的答案

   const listItems = this.state.projectsOfUser.map((project, i) =>

                <li key={i}
                    className="project-list-container__list__list-items"
                    onClick={() => this.handleClick(project)}
                >

                    {/* Not changing mutating in state array */}
                    {/* Passes info to each component, info is from our array of of objects with video info */}
                    <Project projectObject={projectsInfo[i]} />

                </li>
            );

const list items=this.state.projectsOfUser.map（（project，i）=>
this.handleClick（项目）}
>
{/*在状态数组中不改变变异*/}
{/*将信息传递给每个组件，信息来自具有视频信息的对象数组*/}

);

---

不过，我确实发现这是一种“软错误做法”，使用子组件更有效，因此在我确保事情正常运行后，我会这样做。

感谢您的帮助，但还是有点不知所措，我不太会做出反应，所以我了解这里的细节，但我无法跟上这里的信息流，你能再简单一点或者解释一下它是如何工作的吗？你在使用react路由器吗？是的。renderItemList我不太了解，特别是{history}=this.props，但我假设navigateToProject在地图中声明，以某种方式将它绑定到每个列表项？我有点厌倦了尝试这么多东西这么久，所以请原谅这个愚蠢的问题，但我也不确定将renderItemList放在哪里，我将在哪里传递一个项目参数，或者是没有使用它？我将更新我的文章，介绍我的代码的更多内容，在开始使用react之前，您可能需要很好地学习javascript

const{history}=this.props

在js中称为解构。编写

const history=this.props.history

您的

this.props.history.push（“/projectwork”）

行表示您试图将数据像一个页面一样传递到另一个页面，希望它们是并行的，但实际上，它只支持通过props将数据从父组件传递到子组件。因此，您列出的itsm应为“显示/隐藏”样式。另一种方法是使用Redux或类似类型的东西传递数据。但是没有Redux如果你想在组件间传递数据，比如页面重定向，你必须传递参数或查询字符串我在获取项目id时遇到了麻烦我在尝试重定向之前也单击了，但是是的，有很多关于如何使用历史的有帮助的答案，我得到了他的部分id只是一个例子，您可以通过这两种格式传递任何内容1）

'/item/[anything string/number]

或2）

'/item？anything=anything'

对于您的详细信息页面，您只需通过id或任何您假定要通过参数或querystring传递的uniqueKey检索整个对象，要指定，我的意思是首先获取要放入查询字符串的信息，这是我正在努力的地方。您可以通过

this.props.history.push（“/projectwork”，someDataToPass）”传递数据。

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "./index.css";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

serviceWorker.unregister();

   const listItems = this.state.projectsOfUser.map((project, i) =>

                <li key={i}
                    className="project-list-container__list__list-items"
                    onClick={() => this.handleClick(project)}
                >

                    {/* Not changing mutating in state array */}
                    {/* Passes info to each component, info is from our array of of objects with video info */}
                    <Project projectObject={projectsInfo[i]} />

                </li>
            );