在react.js中單擊按鈕時如何更改按鈕圖標

Question

我有一個返回按鈕的反應函數。

<div className="col-6 btn-group btn-group w-100">
       <AuditMenuButtons buttonValue='Pending' buttonName='Inbox' changeFilterForButton={this.props.changeFilterForButton} icon={icon_inbox}/>
       <AuditMenuButtons buttonValue='Rejected' buttonName='Rejected' changeFilterForButton={this.props.changeFilterForButton} icon={icon_rejected}/>
       <AuditMenuButtons buttonValue='Accepted' buttonName='Accepted' changeFilterForButton={this.props.changeFilterForButton} icon={icon_accepted}/>
</div>

下面添加功能

    function AuditMenuButtons(props) {
    return(
        <button className="w-25 btn menu-btn p-lg-3" name={props.buttonName} value={props.buttonValue} onClick={props.changeFilterForButton}><img src={props.icon} className="pr-3 menu-btn-icons">
        </img>{props.buttonName}</button>
    );
}

您將在上面的代碼中看到 3 個按鈕。 我想在單擊一個按鈕時更改按鈕圖標。 當按鈕被點擊時，實際上按鈕圖標顏色應該是綠色的。 圖像是 .png 文件（帶有綠色和銀色邊框）。 我試過 button:active in css 它對我不起作用。 圖像應該保留，直到我單擊另一個按鈕或頁面被刷新

Answer 1

在這種情況下，圖標部分是一個UI 狀態，它必須保持在您的狀態中並傳遞給AuditMenuButtons具有道具。

在AuditMenuButtons使用這些props進行所需的檢查。

        import React,{Component} from 'react';

        class demoComponent extends from Component{
            this.state={
               isClicked:false,
               buttonIcons:{
                  pending:{active_Icon:"../IconURL",Icon:"../IconURL"},
                  rejected:{active_Icon:"../IconURL",Icon:"../IconURL"},
                  accepted:{active_Icon:"../IconURL",Icon:"../IconURL"}
               }
            }

           clickHandler = (event) =>{
             this.setState(
              {
                isClicked:!this.state.isClicked // this is gonna toggle everytime you click //
              }
             );
           }

           render(){
              return <div className="col-6 btn-group btn-group w-100">
                     <AuditMenuButtons clickhandler={this.clickHandler} buttonValue='Pending' buttonName='Inbox' isClicked={this.state.isClicked} buttonIcons={this.state.buttonIcons} changeFilterForButton={this.props.changeFilterForButton} icon={icon_inbox}/>
                     <AuditMenuButtons clickhandler={this.clickHandler} buttonValue='Rejected' buttonName='Rejected' isClicked={this.state.isClicked}  buttonIcons={this.state.buttonIcons} changeFilterForButton={this.props.changeFilterForButton} icon={icon_rejected}/>
                     <AuditMenuButtons clickhandler={this.clickHandler} buttonValue='Accepted' buttonName='Accepted'  isClicked={this.state.isClicked} buttonIcons={this.state.buttonIcons} changeFilterForButton={this.props.changeFilterForButton} icon={icon_accepted}/>
              </div>
           }
        }

        export default demoComponent;

Answer 2

您可以在.css文件中嘗試類似的操作。

.button:focus{background: url('your new green image');

Answer 3

您可以在反應狀態下管理圖像路徑並調用一個方法將其附加到 onClick，在那里您使用 setState() 並更新狀態。

參考https://reactjs.org/docs/handling-events.html

https://reactjs.org/docs/react-component.html#setstate

this.state = {
image_path: 'your image url here'
}

changeUrl = () => {
this.setState({image_path:'new path'});
}
<AuditMenuButtons onClick={this.changeUrl} src={this.state.image_path}/>

Answer 4

你可以試試這個：

changeFilterForButton: function (props) {
     props.currentTarget.style.backgroundColor = '#ccc';
}

function AuditMenuButtons(props) {
    return(
        <button className="w-25 btn menu-btn p-lg-3" name={this.props.buttonName} 
value={this.props.buttonValue} onClick={this.props.changeFilterForButton}><img src={this.props.icon} className="pr-3 menu-btn-icons">
        </img>{this.props.buttonName}</button>
    );
}

或者如果你想使用反應方法，那么你可以像這樣使用構造函數

constructor(props) {
    super(props);
    this.state = {isColor: false};

    // This binding is necessary to make `this` work in the callback
    this.changeFilterForButton= this.changeFilterForButton.bind(this);
  }

  changeFilterForButton() {
    this.setState(state => ({
      isColor: !state.isColor
    }));
  }


  function AuditMenuButtons(props) {
    return (
<button className="w-25 btn menu-btn p-lg-3" name={props.buttonName} value={props.buttonValue} onClick={props.changeFilterForButton} style="background-color: {this.state.isColor? '#CCC' : ''} "><img src={props.icon} className="pr-3 menu-btn-icons">
    </img>{props.buttonName}</button>

    );
  }