如何使用 React onclick 事件为每个 div 创建不同的随机数？答案

【问题标题】：How to create a different random number for every single div with React on onclick event?如何使用 React onclick 事件为每个 div 创建不同的随机数？
【发布时间】：2019-12-10 13:02:32
【问题描述】：

每次单击图像时，我都希望为每个 div 获取不同的随机数。目前，我收到所有 div 元素的相同随机数，但我不知道如何将它分开。我会很感激任何想法。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      randomNumber: 0
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
     const min = 0;
     const max = 9;
     const randFloorNumber = Math.floor(min + Math.random() * (max - min));

     this.setState({
       randomNumber: randFloorNumber
     });
   }

  render() {

    const divs = [1, 2, 3, 4, 5, 6, 7];
    let div = divs.map( div =>
        <div key={divs.div} className="App-number-div col border border-info">
           {this.state.randomNumber}
        </div>
    );

    return (
      <div className="App">
        <img src={logo} alt="Logo" onClick={this.handleClick} />
        <div className="container">
          {div}
        </div>
      </div>
    );
  }
}

【问题讨论】：

既然您只使用生成的div中的数字，您不能返回随机数而不是设置状态，并在每次迭代时调用函数吗？ {getRandomNumber()}

标签： javascript reactjs random onclick dom-events

【解决方案1】：

生成随机数的另一种方法是使用Date.now()。

所以，而不是：

const randFloorNumber = Math.floor(min + Math.random() * (max - min));

用途：

const randFloorNumber = Date.now();

通过使用Date.now()，您将获得 Date 对象的时间戳 - 如this answer 所示。

【讨论】：

【解决方案2】：

每次设置状态时，您只是在状态中设置一个随机数。

这意味着，您的渲染方法正在再次执行。每个 div 的状态都需要一个随机数。

一个可能的解决方案是：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      amount: 7,
      randoms: []
    };

  }

  componentDidMount() {
      this.handleClick();
  }

  handleClick = () => {
    const min = 0;
    const max = 9;
    const randoms = []; 

    for (let i = 0; i < this.state.amount; i++) {
        const randFloorNumber = Math.floor(min + Math.random() * (max - min));
        randoms.push(randFloorNumber);
    }
        this.setState({randoms})
  }

  render() {
    const randoms = this.state.randoms.map(random => {
        return (
        <div key={idx} className="App-number-div col border border-info">
            {random}
        </div>
        )
    })

    return (
      <div className="App">
        <img src={logo} alt="Logo" onClick={this.handleClick} />
        <div className="container">{randoms}</div>
      </div>
    );
  }
}

【讨论】：