有没有办法在反应中使用 onClick 函数循环遍历数组中的元素答案

【问题标题】：Is there a way to cycle through elements in an array using the onClick function in react有没有办法在反应中使用 onClick 函数循环遍历数组中的元素
【发布时间】：2020-11-28 21:57:33
【问题描述】：

我有一个数据数组。

const quotes = [             
  {"author": "Marilyn Monroe",
   "quote" : "I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best." },
  {"author" : "Oscar Wilde",
  "quote" :  "Be yourself, everyone else is already taken."}
]

我想将单个对象渲染到 div。然后我想在单击按钮时循环遍历数组中的对象

这是我迄今为止尝试过的：

class ‘MyComponent extends React.Component {
constructor(props) {
super(props);
this.sayHello = this.sayHello.bind(this);
}
sayHello() {
  return quotes[(Math.floor(Math.random() * Math.floor(quotes.length)))];
}

render() {
  return (
    <div className="body">
    <div className="quote">
  <p>“ {this.sayHello.quote} “</p>  
    </div>
    <button type="button" onClick={this.sayHello.quotes.quote}>New Quote</button>

    </div>
  );
}

};

函数创建（道具）{ 返回（ {this.sayHello.author} ) };

当我单击按钮时，我希望能够获得一个呈现给 div 的新对象。我对反应非常陌生。提前感谢您的所有帮助。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你的代码有几个问题，最大的问题是你实际上没有调用你的sayHello方法。

您的代码的工作示例可能如下所示：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.sayHello = this.sayHello.bind(this);
    this.state = {
      quote: ""
    };
  }
  sayHello() {
    this.setState({
      quote: quotes[Math.floor(Math.random() * quotes.length)].quote
    });
  }

  render() {
    return (
      <div className="body">
        <div className="quote">
          <p>“{this.state.quote}“</p>
        </div>
        <button type="button" onClick={() => this.sayHello()}>
          New Quote
        </button>
      </div>
    );
  }
}

如果你想玩，这里有一个codesandbox link。

【讨论】：

【解决方案2】：

您可以使用功能组件来简化此操作。然后使用 useState 挂钩来跟踪您正在显示的报价。然后使用回调函数为单击按钮时的状态随机分配一个引号。这是一个例子。

import React from "react"

const quotes = [{
  author: "Marilyn Monroe",
  quote: "I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best." 
  }, {
  author: "Oscar Wilde",
  quote: "Be yourself, everyone else is already taken."
  }];

export const MyComponent = (props) =>{
const [quoteIndex, setQuoteIndex] = React.useState(0);
const setNewQuote = () => {
  setQuoteIndex(Math.floor(Math.random() * quotes.length));
}

  return (
    <div className="body">
      <div className="quote">
        <p>“ {quotes[quoteIndex]} “</p>  
      </div>
      <button type="button" onClick={setNewQuote}>New Quote</button>
    </div>
  );

【讨论】：