ReactJS：檢測單擊了哪個按鈕

我有一個簡單的要求，可以檢測單擊了哪個按鈕。代碼如下：

import React, { useState } from 'react'

const App = () => {
  const data = [
    ['Hotel 1A', ['A']],
    ['Hotel 1B', ['B']],
  ]

  const [sameText, setSameText] = useState(false)

  const changeText = (e: any, index: number, item: any) => {
    console.log(e.target.value)
    console.log(index)
    console.log(item)

    if ((item[e.target.value] == item[index])) {
      setSameText(true)
    }
  }
  return (
    <div className='mx-auto'>
      <div className='flex p-16'>
        {data.map((item, index) => (
          <div className='mx-16' key={index}>
            <div className='p-12'>
              <button onClick={(e) => changeText(e, index, item)} value={index}>
                {item[0]}
              </button>
              <div>{sameText ? 'C' : item[1][0]}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default App

上面的代碼將顯示如下文本：

Hotel 1A      Hotel 1B
A             B

如果我單擊 Hotel 1A，我希望將“A”更改為“C”，如果單擊 Hotel 1B，則只有“B”會更改為“C”。我以為我需要獲取按鈕的值，但我無法讓它作業。

任何幫助將不勝感激。

uj5u.com熱心網友回復：

• 首先，你分配item[index]給item[e.target.value]if check ，=也改變===
• 其次，兩個按鈕都有一個狀態，您必須為每個按鈕保留 1 個值

如果您只想使該代碼作業，這里是一個作業示例：

const [sameText, setSameText] = useState([false, false]);

  const changeText = (e: any, index: number, item: any) => {
    if (item[e.target.value] === item[index]) {
      const newState = [...sameText];
      newState[index] = true;
      setSameText(newState);
    }
  };

如果檢查

<div>{sameText[index] ? 'C' : item[1][0]}<div/>

對于 N 個酒店，您可以使用：

const [clickedHotel, setClickedHotel] = useState(
    null,
  );

  const changeText = (e: any, index: number, item: any) => {
    if (item[e.target.value] === item[index]) {
      setClickedHotel(index);
    }
  };

和

<div>{clickedHotel === index ? 'C' : item[1][0]}</div>

uj5u.com熱心網友回復：

您需要存盤每個按鈕的狀態并在單擊時更改狀態。您的按鈕是根據按鈕狀態呈現的

例如：

1. 介紹const [buttonState, setButtonState] = useState(data);
2. map結束buttonState而不是data
3. 通過呼叫來changeText()改變你想要的狀態setButtonState()

uj5u.com熱心網友回復：

您正在使用 items 陣列中的嵌套陣列

你快到了，而且你做得對，console.log(item[1][0])會給你

但是，您還需要做一件事：

import React, { useState } from 'react'

const App = () => {
  const data = [
    ['Hotel 1A', ['A']],
    ['Hotel 1B', ['B']],
  ]

  const [sameText, setSameText] = useState(false)

  const changeText = (e: any, index: number, item: any) => {
    console.log(item[1][0])

    // if ((item[e.target.value] = item[index])) {
    //   setSameText(true)
    // }
  }
  return (
    <div className='mx-auto'>
      <div className='flex p-16'>
        {data.map((item, index) => (
          <div className='mx-16' key={index}>
            <div className='p-12'>
              <button onClick={(e) => changeText(e, index, item)} value={index}>
                {item[0]}
              </button>
              <div>{sameText ? 'C' : item[1][0]}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default App

標籤：javascript 反应 打字稿

上一篇：'number|型別的引數undefined'不能分配給“string”型別的引數

下一篇：為每個API呼叫動態決議Promise.all回應并存盤資料