javascript - 你好 ！反应问题我需要事件处理程序的帮助

Question

单击同一页面右列上的相应组件（缩略图）后，我试图使组件道具（sideBarInfo）详细信息显示在页面的左列上。

请注意，所有导入和导出都在主项目中使用（我在这里删除了它们）。我还将所有组件导入到主 (Page.js) 中。然而，我不断收到 onClick 的类型错误。

这是第一个组件 -缩略图

class Thumbnail extends React.Component {
    render(){
      return (
        <div className="Work" onClick={(e) => this.props.click(this.props.work)} >
            <div className="image-container">
              <img src={this.props.work.imageSrc} alt={this.props.work.imageSrc}/>
            </div>
            <div className="Work-information">
            <p> {this.props.work.work}</p>
            </div>
        </div>
      );
      } }

这是缩略图列表

    class ThumbnailList extends React.Component {
constructor(props){
super(props);
this.state= {
  works: [
      {
      id: 0,
      work: 'Work 1',
      imageSrc: W1,
      view: '#',
      selected: false
    },
      {
      id: 1,
      work: 'Work 2',
      imageSrc: W2,
      view: '#',
      selected: false
        },         
      ]
    }
  }

      handleCardClick = (id,card) => {
        console.log(id);

        let works= [...this.state.works];

        works[id].selected = works[id].selected ? false : true ;

        works.forEach(work=>{
          if(work.id !== id){
            work.selected = false;
          }
        });

        this.setState({
          works
        })
      }

      makeWorks = (works) => {
        return works.map(work => {
          return <Thumbnail work={work} click={(e => this.handleCardClick(work.id,e ))} key={work.id} />
        })
      }


      render(){
        return(
          <div>
            <div className="scrolling-wrapper-flexbox">
              {this.makeWorks(this.state.works)}
            </div>
          </div>
        );
      }
  }

这是侧边栏信息

function SidebarInfo(props) {
return (
  <img width="370" height="370" src= {props.imageSrc} />
    <p> {props.work} </p>
);}

这是有问题的页面- 粗体一直给出类型错误（无法读取未定义的属性“已选择”。）

class Page extends React.Component {

render() {
  return (
      <span>

      <div className="column left">
      <div className="">
      **{this.props.work.selected && <SidebarInfo imageSrc={this.props.imageSrc} /> }**
      </div>
      </div>

      <div className="column right" >
            <div>
                <ThumbnailList  />
            </div>
         </div>
      </span>
      )
    }
  }

标签： javascriptnode.jsreactjs

Answer 1

我能够为任何感兴趣的人回答这个问题。

我的文件安排中有一些基本错误已得到纠正。

重构后，我能够使用 3 个类/函数实现我想要的；App.js、Thumbnail.js 和 SideBarInfo.js

在此沙盒上查看一个带有样式的工作解决方案：https ://codesandbox.io/s/modern-sky-y9d3c

请参阅下面的解决方案；

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      works: [
        {
          id: 0,
          work: "Work 1",
          imageSrc:
            "https://images.unsplash.com/photo-1584608168573-b6eec7a04fd7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80",
          view: "#",
          selected: false
        },
        {
          id: 1,
          work: "Work 2",
          imageSrc:
            "https://images.unsplash.com/photo-1581665269479-57504728e479?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80",
          view: "#",
          selected: false
        }
      ]
    };

    this.handleCardClick = this.handleCardClick.bind(this);
    this.makeWorks = this.makeWorks.bind(this);
    this.showWorks = this.showWorks.bind(this);
  }

  handleCardClick = (id, Thumbnail) => {
    console.log(id);

    let works = [...this.state.works];

    works[id].selected = works[id].selected ? false : true;

    works.forEach((work) => {
      if (work.id !== id) {
        work.selected = false;
      }
    });

    this.setState({
      works
    });

   
  };

  makeWorks = (works) => {
    return works.map((work) => {
      return (
        <Thumbnail
          work={work}
          click={(e) => this.handleCardClick(work.id, e)}
          key={work.id}
        />
      );
    });
  };

  showWorks = (works) => {
    let i = 0;
    var w = [];
    while (i < works.length) {
      if (works[i].selected) {
        w = works[i];
      }
      i++;
    }
  return ( <SidebarInfo imageSrc={w.imageSrc} work={w.work} /> );
  };

  render() {
    return (
      <div className="App">
        <span>
          <div> { this.showWorks(this.state.works)} </div>
  <div className="">
            <div className="scrolling-wrapper-flexbox">
              {this.makeWorks(this.state.works)}
            </div>
          </div>
        </span>
      </div>
    );
  }
}


class Thumbnail extends React.Component {
  render() {
    return (
      <div>
         <div className="column left">
        {/* this.props.work.selected && <SidebarInfo work={this.props.work.work} imageSrc={this.props.work.imageSrc}/> */}
        </div>
        <div className="column right">
      <div className="Work" onClick={(e) => this.props.click(this.props.work)}>
        <div className="image-container">
          <img src={this.props.work.imageSrc} alt={this.props.work.imageSrc} />
        </div>
        <div className="Work-information">
          <p> {this.props.work.work}</p>
        </div>
      </div>
      </div>
     
      </div>
    );
  }
}

export default Thumbnail;


function SidebarInfo(props) {
  return (
    <div className="one">
    <div className="Work">
      <h1> NAME </h1>
      <div className="image-container">
        <img
          width="370"
          height="370"
          src={props.imageSrc}
          alt={props.imageSrc}
        />
      </div>
      <p> {props.work} </p>
      <p> {props.view} </p>
    </div>
    </div>
  );
}

export default SidebarInfo;