использую сторонний скрипт для того, чтобы нарисовать плеер у себя на странице.
Автор скрипта предлагает вставлять HTML на страничку так:
<div id="yohoho" data-title="Тайна Коко"></div>
<script src="//yohoho.cc/yo.js"></script>
Что делаю я?
export const Kino = () => {
const [title, setTitle] = React.useState(undefined);
return (
<div>
<div id="batya">
</div>
<input
type="text"
placeholder="Search"
value={title}
onChange={(e)=>setTitle(e.target.value)}
/>
<button onClick={()=>{
const el= document.querySelector("#yohoho")
const batya=document.querySelector("#batya")
el?.remove()
const newY=document.createElement('div')
newY.id="yohoho"
newY.dataset.title=title
newY.dataset.player="collaps,kodik,hdvb,bazon,ustore,alloha,pleer,videospider,videocdn,trailer"
newY.dataset.separator=","
batya?.appendChild(newY)
Start()
}}>Search</button>
</div>
)
}
Функция Start() вызывает инициализирующую функцию в скрипте yo.js
В чем суть проблемы? Плеер появляется, однако при нажатии на кнопки переключения плееров ничего не происходит. При этом, если вставить код (предложенный разработчиком) просто в HTML разметку все прекрасно работает и кнопки нажимаются. Подозреваю, что проблема именно в React и он почему то не хочет регистрировать онклики на кнопки.
На скриншоте нужные кнопки справа.
Что я делаю неправильно и почему плееры не меняются?