[英]React Syncing element from Virtual DOM with element from HTML DOM
I have a react component which contains a 3D animation with playback controls (pause/play) inside a HTML page and I need the controls to be synced with some buttons outside the react component.我有一个 React 组件,它包含一个 3D 动画,在 HTML 页面内带有播放控件(暂停/播放),我需要将控件与 react 组件外的一些按钮同步。
The controls in react are implemented like this react中的控件是这样实现的
<Button color='red' onClick={() => { setDataPlayback(false); }} > <Icon name='pause' /></Button>
<Button color='red' onClick={() => { setDataPlayback(true); }} > <Icon name='play' /> </Button>
and the buttons in the html page are并且html页面中的按钮是
<div id="btns">
<button id="html-button-pause" onclick="python_function_pause()"></button>
<button id="html-button-play" onclick="python_function_play()"></button>
</div>
So whenever I press a button in react, I want it to trigger a click on the html button.所以每当我按下一个按钮时,我希望它触发对 html 按钮的点击。
I think this should work:我认为这应该有效:
<Button color='red' onClick={() => { setDataPlayback(false); python_function_pause(); }} > <Icon name='pause' />
And the same for the other button.另一个按钮也是如此。 You can invoke
click
of an HTML element programmatically using .click()
function.您可以使用
.click()
函数以编程方式调用 HTML 元素的click
。 You can read more about it here .您可以在此处阅读更多相关信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.