ReactJS onClick 获取 DIV ID答案

【问题标题】：ReactJS onClick get DIV IDsReactJS onClick 获取 DIV ID
【发布时间】：2019-12-28 05:33:25
【问题描述】：

我有 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;

【问题讨论】：

标签： javascript reactjs dom onclick getelementbyid

【解决方案1】：

也许尝试不同的方法并从数组中绘制元素，这样你可以更轻松地洗牌，就像这样：

  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

【讨论】：

谢谢，这真的很有帮助，绝对是我想要的方向。你的洗牌方法比我想象的要干净得多，这很棒。我也设法从这种方法中获取了 div 值。非常感谢！

【解决方案2】：

使用短标识符

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;

【讨论】：