单击一个块并控制子块

Question

告诉我如何在点击块时改变子元素的属性

!!post &&  post.map((item) =>
<div key={item.id} onClick={(e)=>onVideo(e)}>
<video width="310.44" height="458" style={{objectFit: 'cover'}} controls={false}>
<source src={item.url} type="video/mp4" />
</video>
<div>
<div style={{fontSize: '16px'}}>{item.date}</div>
<div style={{fontFamily: 'Roboto-Bold',fontSize: '22px'}}>{item.name}</div>
</div>
</div>)

我需要当点击onVideo时，一个动作被应用在html视频上，全屏应用并播放

根据帖子中帖子的数量形成和显示块，可能有10个这样的块示例

Answer 1

我不明白你的问题。如果你想通过div的onClick改变视频中的一些道具，你需要为此进行设置。例如，如果你想改变视频上的control道具，通过divonClick，给control一个变量，然后改变divonClick的值。在这种情况下，它会像这样——>

const [state,setState] = useState({})
!!post &&  post.map((item) =>
<div key={item.id} onClick={()=>setState(data=>{...data,{[item.id]:true})}>
<video width="310.44" height="458" style={{objectFit: 'cover'}} controls={state[item.id]}>
<source src={item.url} type="video/mp4" />
</video>
<div>
<div style={{fontSize: '16px'}}>{item.date}</div>
<div style={{fontFamily: 'Roboto-Bold',fontSize: '22px'}}>{item.name}</div>
</div>
</div>)