Сценарий: когда пользователь нажимает на него, данные должны быть переданы в someFunction()
.
<span id="someid" onClick={() => someFunction()} data-video-page="some data" class="dot" />`
Я пытался использовать методы getAttributes()
, querySelector()
до сих пор, чтобы получить данные из атрибутов данных. Но один из них работает, на самом деле они не возвращаются.
Доступ к атрибуту data*
можно получить с помощью метода getAttribute()
.
Пример 1:
var data = document.getAttribute('data*');
Пример 2:
var element = document.querySelector('div');
var data = element.getAttribute('data');
В вашем вопросе есть тег React.js
, поэтому я предполагаю, что это для использования data-set
в React.js.
Для React.js именно так можно использовать набор данных, если вы хотите передать данные какой-либо функции в событии щелчка. Вы также можете посетить живую демонстрацию здесь: stackblitz
const handleClick = (event) => {
// Your data is stored in event.currentTarget.dataset
// Here we get the data by destructuring it
// The name video-page need to change to videoPage for JS rules
const { videoPage } = event.currentTarget.dataset;
console.log(videoPage);
// Result printed: "your data"
// You can also run someFunction(videoPage) here
};
export default function App() {
return (
<button data-video-page="your data" onClick={handleClick}>
TEST
</button>
);
}
Рабочий фрагмент
const someFunction = console.log;
function App() {
return (
<span id="someid"
onClick={(e) => {
const videoPage = event.target.dataset['videoPage'];
someFunction(videoPage)
}}
data-video-page="some data"
className="dot"
>
click me
</span>
)
}
ReactDOM.render(<App />, document.getElementById('root'));
<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>
<div id="root"></div>