嘗試設置單擊的按鈕的狀態，但之前單擊的按鈕的狀態未更改

Question

我試圖在單擊時更改圖像，但是當我單擊以前單擊的按鈕時，它仍然是紅色的。 我試圖一次只讓一個按鈕變成紅色，其他按鈕應該是黑色的（比如單選按鈕）。

這是我的代碼，請幫忙。

import React from 'react';
import './App.css';
import redlogo  from "./redlogo.png";
import blacklogo  from "./blacklogo.png";

class   App  extends React.Component {
  constructor(props) {
    super(props);
    this.state = {src:blacklogo};
  }

  changeImageSource(index,event) {
    console.log('button is clicked at index ' + index)
    event.target.src = redlogo;
  }

  render() {
    let tracks = ["button 1", "button 2", "button 3", "button 4", "button 5", "button 6 ", "button 7", "button 8", "button 9",];
    
    return( 
        <div className="scrollmenu" id="scrolldiv"  >
          { console.log(tracks)}
          {tracks.map((item,index)=>
                  <button id={index} key={index}
                   onClick={this.changeImageSource.bind(this,index)}
                  > 
                    <figure>
                      <img  className='img' src={this.state.src} />
                      <figcaption>{item}</figcaption>
                    </figure>
                  </button>   
              )}
       </div>
       )
      }
  }
export default  App ;

Answer 1

首先，您的代碼存在重大邏輯錯誤。 我從您的問題中了解到，您一次只希望 1 個按鈕為紅色。 如果是這樣，您可以分配一個狀態來保存當前需要為紅色的按鈕索引。 內部構造函數： this.state = {red_btn : null} 。 比在任何按鈕上單擊內部 changeImageSource 函數： this.setState({red_btn : index}) 。 通過該邏輯設置，您可以使用以下內容渲染圖像 src 屬性： src={this.state.red_btn == index ? "./red_logo.png" : "./black_logo.png"} src={this.state.red_btn == index ? "./red_logo.png" : "./black_logo.png"}

話雖如此，即使您當前的代碼也幾乎沒有需要更正的地方。 這只是為了讓您更好地理解：如果您在圖像 src 屬性中傳遞this.state.src而不是按鈕單擊處理程序，則必須傳遞this.setState({src: image_url}) 。

您的事件處理程序在按鈕單擊時被調用，因此在該事件處理程序（即 changeImageSource 函數）內 event.target 不是您的圖像而是按鈕，並且您正在該按鈕上設置 src。

Answer 2

您的代碼當前不起作用，因為您沒有跟蹤哪個索引應該是黑色，哪個索引應該是紅色。 這可以通過跟蹤狀態中的索引而不是源來解決。 這是一種方法：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {selectedIndex: null};
}

changeImageSource(event) {
  this.setState({selectedIndex: event.target.name})
}

render() {
  let tracks = ["button 1", "button 2", "button 3", "button 4", "button 5", "button 6 ", "button 7", "button 8", "button 9",];

return( 
    <div className="scrollmenu" id="scrolldiv"  >
      { console.log(tracks)}
      {tracks.map((item,index)=>
              <button id={index} key={index} name={index} onClick={this.changeImageSource} > 
                <figure>
                  <img  className='img' src={index === this.state.selectedIndex ? redlogo : blacklogo} />
                  <figcaption>{item}</figcaption>
                </figure>
              </button>   
          )}
   </div>
   )
  }

}

現在我們如何在渲染的.map比較每張圖片應該顯示哪個標志： src={index === this.state.selectedIndex ? redlogo : blacklogo} src={index === this.state.selectedIndex ? redlogo : blacklogo} . 由於只能選擇一個索引，那么此條件將確保紅色徽標僅出現一次，其余為黑色。

此外， changeImgSource函數現在更新selectedIndex而不是圖像源，圖像源與索引沒有關系，因此您會看到多個紅色徽標。