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>
   )
}

React.js通过另一个组件的onclick更改div中的内容

1 个答案: