node.js - 传递道具点击按钮
问题描述
<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>
我想将按钮单击时的电影道具传递给手表组件,以便手表组件。观看组件是您将被重定向到观看您从上面的电影列表组件中选择的电影的地方
解决方案
你onClick
需要成为一个函数
<Button onClick={() => this.doSomething(movie)} />
然后您可以在该函数中访问电影值
const doSomething = (movie) => {
//Do some stuff with the movie
}
推荐阅读
- java - 为闭源 Android SDK 实施自定义许可
- python - 如何在 Python 中让 n 个线程永远同时运行?
- javascript - 为什么我不能删除输入字段中的字符
- javascript - Javascript:如何分配异步调用的结果
- javascript - 如何创建动态表单?
- fastapi - 以编程方式停止 Uvicorn 服务器的最佳方法是什么?
- xamarin - CollectionView 的某些单元格中的对象数组
- android - 如何在 Jetpack Compose 中同时使用颜色和图像作为背景?
- python - 奥赛罗的极小极大函数,不假思索地选择第一个点
- c++ - Cmake 生成的可执行文件中的错误加载器/链接器信息