ReactJS onClick 获取 DIV 个 ID

Question

我有3个div和onClick，我想抓取每个div的ID。

（最后，我想添加一个随机播放功能，以随机播放divs）。但目前，我只想获得每个人的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;

Answer 1

使用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;

Answer 2

也许尝试一种不同的方法，从一个数组中提取元素，这样您可以更轻松地打乱顺序，例如：

  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>

它是用功能组件的方式写的，但是你可以看一个例子Here

ReactJS onClick 获取 DIV 个 ID

ReactJS onClick get DIV IDs

javascript

dom

onclick

getelementbyid

reactjs