通过课外功能(或替代方案)来操纵状态

Question

希望您过得愉快。鉴于我与React有多少新手，我可能会为您带来一些问题。

这是设置：我为我的投资组合网站提供了一个"项目"页面，在该页面上，我将一个项目完整地包含一个完整尺寸的图像和详细信息，而在此下面，我列出了所有其他项目。一旦单击其中一个，特色项目就应该更改。我敢肯定，对于大多数人来说，这是一个非常简单的事情，但我似乎被卡住了。

这是我当前设置的方式：

1. 组件类以外的一个名为"项目"的数组可以存储它们，一个项目看起来像这样：

  {
    key: 0,
    title: "Project title",
    description:
      "Lorem ipsum",
    details: [
      "...",
      "...",
      "..."
    ].map((detail, i) => <li key={i}>{detail}</li>),
    image: ImageObject
  },

2. 此功能(在类的渲染方法中引用(也在主组件类外部，该类别为每个项目制作DIV

function ProjectList(props) {
  const projects = props.projects;
  const projectItems = projects.map(project => (
    <div key={project.key}>
      <a href="#">
        <img src={project.image} alt={project.title} />
      </a>
    </div>
  ));
  return <div className="row">{projectItems}</div>;
}

和渲染方法中的引用如下：

<ProjectList projects={projects} />

3. 现在我们进入项目类，其中一个称为" CurrentProjectIndex"的状态值和" setProject"函数：

setProject = index => {
   this.setState({ currentProjectIndex: index });
 };

所有内容都可以正常工作并显示正确，如果我手动编辑状态，它确实显示了相关项目，但是我不确定如何在此处进行。我已经尝试在DIV和A标签中添加一个onclick属性，但是看来我无法在主类之外引用SetState，我想这是有道理的，但是如果渲染方法在渲染方法中尚未识别setState我将其放在主类中。

我意识到这可能是一些非常基本的东西，但是我觉得我可能完全错误地处理了这个过程，而且我在这里完全错误的曲目。要么那是愚蠢的，这是完全可能的。无论哪种方式，我都非常感谢任何建议！

Answer 1

您可以尝试以下操作：添加一个按钮，单击事件调用setProject并传递索引(那是project.key，对吗？(作为参数。您可能还需要添加一个event.preventdefault。希望能帮助到你。这是代码：

setProject = (event, index) => {
   event.preventDefault();
   this.setState({ currentProjectIndex: index });
 };
function ProjectList(props) {
  const projects = props.projects;
  const projectItems = projects.map(project => (
    <div key={project.key}>
      <a href="#">
        <img src={project.image} alt={project.title} />
      </a>
      <button
          type='button'
          onClick={event => { this.setProject(event, project.key) }}
      >
      Select this project
      </button>
    </div>
  ));
  return <div className="row">{projectItems}</div>;
}