Question

我有一个react函数，它返回一个按钮。

<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在CSS中对我不起作用。图片应该一直保留，直到我单击另一个按钮或刷新页面

Answer 1

在这种情况下，图标部分是 UI状态，它必须保持在您的状态并传递到AuditMenuButtons具有道具。

使用props中的这些AuditMenuButtons进行所需的检查。

        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

您可以在反应状态下管理图像路径并调用方法attach 到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>

    );
  }

在react.js中单击按钮时如何更改按钮图标

4 个答案: