如何從 React 中的 1 個 onClick 函數訪問多個按鈕？

Question

我已經創建了一個函數，當單擊按鈕時將調用該函數。 我想將它用於兩個按鈕，但是在實現它之后，當我單擊一個按鈕時，兩個按鈕同時被單擊？

這是函數，將在onClick之后調用 -

showMore = () => {
  this.setState((prevState) => {
    return { showMore: !prevState.showMore };
  });
};

這是我用來調用這兩個按鈕的條件（我知道，我可以在這里做一些事情來使它只有兩個 if 條件而不是 4，建議？）

if (!this.state.showMore) {
  accounts = take(accounts['demo_accounts'], DEFAULT_NO_OF_ACCOUNTS);
}

if (this.state.showMore) {
  accounts = accountsData['demo_accounts'];
}

if (!this.state.showMore) {
  cardNumbers =
    take(cardNumbers['demo_numbers'], DEFAULT_NO_OF_ACCOUNTS);
}

if (this.state.showMore) {
  cardNumbers = accountsData['demo_numbers'];
}

我將它用於 2 個按鈕，但是，這兩個按鈕同時被點擊，我知道我可以將 ID 用於按鈕，但這並不奏效。

總結一下，基本上有兩個問題——

1. 如何減少“if”語句？
2. 如何阻止兩個按鈕被點擊？

Answer 1

如何減少“if”語句？

只需結合類似的條件。 由於您的所有條件基本上都在檢查this.state.showMore的值， this.state.showMore您實際上只需要 1 個條件測試。

if (this.state.showMore) {
  accounts = accountsData['demo_accounts'];
  cardNumbers = accountsData['demo_numbers'];
} else {
  accounts = take(accounts['demo_accounts'], DEFAULT_NO_OF_ACCOUNTS);
  cardNumbers =
    take(cardNumbers['demo_numbers'], DEFAULT_NO_OF_ACCOUNTS);
}

如何阻止兩個按鈕被點擊？

當我想在多個按鈕上使用單個通用點擊處理程序時，我使用高階函數，這是一個返回函數的函數。 所以在這種情況下，我創建了一個clickHandler = id => () => this.setState({ [id]: <value> });

此回調采用id參數，該參數在將回調附加到元素的 onClick 處理程序時使用，它會立即被調用並返回一個新函數，該函數實際用作回調， id保存在外殼中。

<button onClick={this.clickHandler('a')>Button A</button>
<button onClick={this.clickHandler('b')>Button B</button>

這是 HOF 處理程序的代碼和框示例

Answer 2

類似的答案，但您可以設置它以便每個按鈕具有不同的 ID 並附加到不同的事件處理程序，如下所示：

<button id="btn1">Click me!</button>
<button id="btn2">Me too!</button>

Javascript：

const button1 = document.getElementById("btn1").addEventHandler('click', function);
const button2 = document.getElementById("btn2").addEventHandler('click', function2);