Question

 <Slider {...settings}>
        {this.state.featuredMovies.map(movie =>
        <div  className="" key={movie._id}>

           <Card inverse style={{padding: "10px", width: "90%"}}>
        <CardImg  src={`/files/${movie.thumbnail}`} alt="Card image cap" />
        <CardImgOverlay className="movie-list-overlay">
          <CardTitle>{movie.MovieName}</CardTitle>
          <CardText>{movie.Description}</CardText>
          <CardText>
            <small>
            <a href="watch">
                    <Button className="btn-fill btn-movie " color="primary" onClick={movie}>
                      Watch  
                    </Button></a></small>
          </CardText>
        </CardImgOverlay>
      </Card>
        </div>
        )}
      </Slider>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我想将按钮单击时的电影道具传递给手表组件，因此手表组件

class WatchMovies extends React.Component {



  ComponentDidMount(){
    const { player } = this.refs.player.getState();
    
  }
  handleDelete = e => {
    console.log(this.refs.player.play())
  }
  handleD = e => {
    const {player} = this.refs.player.getState()
    console.log(player.currentTime)
    console.log(this)
  }

  

  render() {

    return (
      <>
        <div className="container-fluid bg-black">
          

          <div className="col-md-12 mx-auto pt-5">
          <Row className="" >
            <div className="col-md-12 mx-auto py-5">
              <Player
                  ref="player"
                  width="80%"
                  playsInline
                  poster="/assets/bg5.jpg"
                  src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
                  position="center"
                  LoadingSpinner
                  onEnded={() => console.log("ended")}
              />
              <Button onClick={this.handleDelete}>D </Button>
              <Button onClick={this.handleD}>D </Button>
            </div>
          </Row>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我想将按钮单击时的电影道具传递给手表组件，以便将手表组件传递给手表组件。观看组件是您将重定向到上面的电影列表组件中观看所选电影的地方

Answer 1

您的<Button onClick={() => this.doSomething(movie)} />必须是一个函数

const doSomething = (movie) => {
  //Do some stuff with the movie
}

然后您可以在该功能中访问电影值

mutate_at

通过按钮传递道具

1 个答案: