[英]ReactJS onClick get DIV IDs
我有 3 个 div 和 onClick,我想获取每个 div 的 ID。
(最终,我想添加一个随机播放功能,以随机播放 div)。 但目前,我只想得到每个人的ID。
如果我在每个 div onClick
上 console.log this
,我似乎只得到最后一个 div 的值。 无论我单击哪个 div。
做到这一点的最佳方法是什么?
我读过React.createRef()
,但这似乎没有为每个 div 生成唯一的 ID。 (我读过最好不要在反应中使用document.getElementByID()
)。
那么最好的方法是什么?
到目前为止,这是我的代码!
import React, { useState } from 'react';
class Cylinders extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
this.state = {
ball: ''
}
}
componentDidMount = () => {
console.log('mount');
}
generateShuffle = () => {
console.log('shuffel');
console.log('this', this);
}
render() {
return (
<section>
<div className="columns is-mobile">
<div className="column">
<h1 className="title has-text-black is-size-2">Cylinders Game</h1>
</div>
</div>
<div className="columns is-mobile">
<div className="column">
<button className="title has-text-black is-size-2">Ball container</button>
</div>
</div>
<div className="columns is-mobile">
<div className="column">
<div className="columns is-multiline">
<div
onClick={this.generateShuffle}
className="hat1"
// ref="1"
ref={this.myRef}
id="1">
</div>
</div>
</div>
<div className="column">
<div className="columns is-multiline">
<div
className="hat2"
ref={this.myRef}
id="2"
onClick={this.generateShuffle}>
</div>
</div>
</div>
<div className="column">
<div className="columns is-multiline">
<div className="hat3"
ref={this.myRef}
id="3"
onClick={this.generateShuffle}>
</div>
</div>
</div>
</div>
</section>
);
}
}
export default Cylinders;
也许尝试不同的方法并从可以更轻松地洗牌的数组中绘制元素,如下所示:
const [things, setThings] = useState([
{ name: "Thing" },
{ name: "Other Thing" },
{ name: "Another Thing" }
]);
const shuffle = () => {
// shuffle things variables
const shuffled = things.sort(() => Math.random() - 0.5);
setThings([...shuffled]);
};
并渲染它们:
<div className="App">
<div>
<button onClick={shuffle}>Shuffle list</button>
</div>
{things.map((item, index) => {
return (
<div
className="something"
onClick={() => handleClick(item)}
key={item.name + index}
>
{item.name}
</div>
);
})}
</div>
它以功能组件方式编写,但您可以在此处查看示例
使用shortid
npm i shortid
来源:
import React, { useState } from 'react';
var shortid = require('shortid');
class Cylinders extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
this.state = {
ball: ''
}
}
componentDidMount = () => {
console.log('mount');
}
generateShuffle = (e) => {
console.log('shuffel');
console.log('this', e.target.id);
}
render() {
return (
<section>
<div className="columns is-mobile">
<div className="column">
<h1 className="title has-text-black is-size-2">Cylinders Game</h1>
</div>
</div>
<div className="columns is-mobile">
<div className="column">
<button className="title has-text-black is-size-2">Ball container</button>
</div>
</div>
<div className="columns is-mobile">
<div className="column">
<div className="columns is-multiline">
<div
onClick={generateShuffle}
className="hat1"
// ref="1"
id={shortid.generate()}>div1
</div>
</div>
</div>
<div className="column">
<div className="columns is-multiline">
<div
className="hat2"
id={shortid.generate()}
onClick={generateShuffle}>
div2
</div>
</div>
</div>
<div className="column">
<div className="columns is-multiline">
<div className="hat3"
id={shortid.generate()}
onClick={generateShuffle}>
div3
</div>
</div>
</div>
</div>
</section>
);
}
}
export default Cylinders;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.