ReactJS onClick获得DIV ID

Question

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

（最终，我想添加一个随机播放功能，以随机播放div）。但是暂时，我只想获取每个ID。

如果我在每个div this上使用console.log onClick，我似乎只会得到最后一个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