Reactjs 通过来自另一个组件的 onclick 更改 div 中的内容

Question

我是新来的反应，并且遇到了问题。

我有一个包含对象映射数组的组件 (film.js)，通过单击每个对象，我想根据单击的元素之一来更改 {komponentaFilma}。

我的逻辑可能完全错误，请随时为我指明正确的方向，谢谢。

app.js

      render() {

    let komponentaFilma = null;
    if ( this.state.prikaziFilmCont ) {
      komponentaFilma = (
        <div className="trailer_container">
          <p>Ovo je film koji je kliknut</p>
        </div>
      );
    }


    return (
      <div>
      <div className="movies-container">
        {this.state.filmovi.map((film, index) => {
          return <Film
                    naslov={film.naslov}
                    naslovnaSlika={film.naslovnaSlika}
                    key={film.id}
                    openFilm={() => this.injectFilm(index)}/>
      })}
      </div>
      <Gallery />
      {komponentaFilma}
      </div>
    );
  }

我也在 app.js 中使用这个方法

  injectFilm = (filmIndex) => {
    const prikaziFilm = this.state.prikaziFilmCont;
    this.setState({prikaziFilmCont: !prikaziFilm})
  }

这个也有

prikaziFilmCont: false

在状态

film.js 看起来像这样

const Film = (props) => {
  return (
      <div onClick={props.openFilm} className="singleMovie">
        <h3>{props.naslov}</h3>
        <img src={props.naslovnaSlika} alt="nova slika "/>
      </div>
  )
}

这是我的 app.js 中这些对象被点击的状态，我想将这些对象（onclick）中的信息传递给 komponenta filma。

  state = {
    filmovi: [
      {
        "naslov": "Safarikova",
        "id": "00",
        "naslovFilma": "Safarikova",
        "godina": "Safarikova",
        "opis": "Lorem ipsum dolor sit ....",
        "naslovnaSlika": "http://dusanmuncan.underconstructioncity.com/srdjan_susa/images/safarikova.png",
        "linkVideo": "http://video/video.mp4",
        "externiLink": "http://www.vimeo.com/video.mp4"
      }, {
        "naslov": "Svetski sampion",
        "id": "01",
        "naslovFilma": "Sampion",
        "godina": "Safarikova",
        "opis": "Cupcake ipsum color sit pinaple juice ....",
        "naslovnaSlika": "http://dusanmuncan.underconstructioncity.com/srdjan_susa/images/trailer_prvaksveta.png",
        "linkVideo": "http://video/videosampoion.mp4",
        "externiLink": "http://www.vimeo.com/videosampion.mp4"
      }, {
        "naslov": "Stolice",
        "id": "02",
        "naslovFilma": "stolicice malene",
        "godina": "stolice ",
        "opis": "sede ljudi na stolicama i na kraju ustanu",
        "naslovnaSlika": "http://dusanmuncan.underconstructioncity.com/srdjan_susa/images/trailer_stolice.png",
        "linkVideo": "http://video/stolice.mp4",
        "externiLink": "http://www.vimeo.com/sto_lice.mp4"
      }
    ],
    prikaziFilmCont: false
  }

如果您需要我的更多信息，请写信。

Answer 1

您可以在您的州添加selectedFilm 属性

state: {
  ...... // other properties in state
  selectedFilm: {}
}

您需要找到点击了哪部电影并将该电影设置为selectedFilm在App组件中的状态。所以换injectFilm

injectFilm = (filmIndex) => {
    // const prikaziFilm = this.state.prikaziFilmCont;
    // finding the film clicked 
    const selectedFlim = this.state.filmovi.find((film, index) => index === filmIndex)
    this.setState((prevState) => ({
        // prikaziFilmCont: !prevState.prikaziFilm,
       selectedFlim
    }))    
  }

您可以更新您的if 条件并使用selectedFlim

// checking if "selectedFlim" is empty object or not
// if it is not empty then use "komponentaFilma" as below jsx
// otherwise "komponentaFilma" will be null
let komponentaFilma = null;
if ( Object.keys(this.state.selectedFilm).length > 0 ) {
      komponentaFilma = (
        <div className="trailer_container">
          <p>{this.state.selectedFlim.id}</p>
          <p>{this.state.selectedFlim.naslovFilma}</p>
        </div>
      );
    }

最后你可以在你的 jsx 中使用komponentaFilma

return (
      <div>
      <div className="movies-container">
        {this.state.filmovi.map((film, index) => {
          return <Film
                    naslov={film.naslov}
                    naslovnaSlika={film.naslovnaSlika}
                    key={film.id}
                    openFilm={() => this.injectFilm(index)}/>
      })}
      </div>
      <Gallery />
      // checking if "selectedFlim" is empty object or not
      // if it is empty then nothing is displayed
      // otherwise "komponentaFilma" will be displayed
      {Object.keys(this.state.selectedFilm).length > 0 && komponentaFilma}
      </div>
    );

注意：您可以使用KomponentaFilma 作为组件，并将selectedFilm 作为道具传递

例如：

{Object.keys(this.state.selectedFilm).length > 0 && <KomponentaFilma selectedFilm={this.state.selectedFilm />}

KomponentaFilma 组件可以是

const KomponentaFilma = ({selectedFilm}) => {
   return (
     <div>
       <p>{selectedFlim.id}</p>
       <p>{selectedFlim.naslovFilma}</p>
     </div>
   )
}