Question

我是一个很新的反应者，而且我在一个问题上停留了很长时间。

我有一个DisplayList组件，它遍历对象数组并以列表形式显示它们。每个对象都变成一个按钮。我还具有另一个组件，可以在单击该项目后呈现列表中每个项目的单一视图。我的问题是，我必须在displayList组件内一次渲染所有项目的单一视图。我想要的是能够单击列表项，并仅显示有关我单击的项的信息并使用“项目”作为道具来呈现另一个组件。我该怎么办？我怎么了

我的DIsplayList组件（对该问题重要的部分）：

export default class DisplayList extends Component {
  constructor() {
    super();
    this.state = {
      displaySingle: false
    };
  }

  handleClick = () => {
    this.setState({
      displaySingle: true
    })
  }

  render() {
    if (this.props.projects && this.props.projects.length > 0) {
      return (
        <List component="nav">
          {this.props.projects.map(project => (
            <div className="all-content-wrapper" key={project.id}>
              <ListItem button value={project} onClick={this.handleClick}>
                {this.state.displaySingle ?
                  <DisplaySingleItem project={project} /> :
                  null
                }
                <ListItemICon>
                  <img
                    className="single-item-img-in-list-view"
                    src={project.img}
                  />
                </ListItemICon>

Answer 1

您只是从正确的方法做起的一个提示：

将onClick（）中的条件更改为：

onClick={()=>this.handleClick(project.id)}
         { this.state.displayProject_id === project.id ?
           <DisplaySingleItem project={project} /> : 
            null
         }

现在将handleClick（）定义为：

    handleClick = (project_id) => {
    this.setState({
                displayProject_id: project_id
               })

    }

不要忘记在构造函数中定义初始状态：

this.state = { 
           displayProject_id:null
 };

Answer 2

<div className="all-content-wrapper" key={project.id}>
     <ListItem button value={project} onClick={()=>this.handleClick(project)}>
            {this.state.displayProject && this.state.displayProject.id==project.id ?
              <DisplaySingleItem project={project} /> :
              null
            }
            <ListItemICon>
              <img
                className="single-item-img-in-list-view"
                src={project.img}
              />
            </ListItemICon>
    </ListItem>
</div>

像上面那样更改您的JSX，以便将当前项目传递到handleClick并像下面那样更改handleClick。

handleClick = (project) => {
    this.setState({
      displayProject : project
   })
 }

它现在应显示所单击项目的<DisplaySingleItem/>。

Answer 3

要仅显示所选项目，请务必对其进行引用。现在，您的handleClick()函数不接受，并且您无法识别所选择项目的参数或数据。

我为您提供的解决方案是将project作为参数传递给handleClick(project)。因此您的代码应如下所示。

export default class DisplayList extends Component {
  constructor() {
    super();
    this.state = {
      displaySingle: false
    };
  }

  handleClick = (project) => {
    this.setState({
      selectedProject: project, // <- use this state to show your popup or 
                                     // whatever view you're using
      displaySingle: true
    })
  }

  render() {
    if (this.props.projects && this.props.projects.length > 0) {
      return (
        <List component="nav">
          {this.props.projects.map(project => (
            <div className="all-content-wrapper" key={project.id}>
              <ListItem button value={project} onClick={() => this.handleClick(project)}>
                {this.state.displaySingle ?
                  <DisplaySingleItem project={project} /> :
                  null
                }
                <ListItemICon>
                  <img
                    className="single-item-img-in-list-view"
                    src={project.img}
                  />
                </ListItemICon>
   )
 }

渲染displaySIngleElement组件onClick反应

3 个答案: