Question

import React, { Component } from 'react';
 class Buttons extends Component {
    constructor(props) {
     super(props);
   }
   render() {
    return (
      <div className="displayButtons">
        <input className='button1' onClick={this.props.get_menu_items_api} 
        value="Categories" type="button" ref="button"></input>
        <input className='button2' onClick={this.props.get_addons_items_api} 
        value="Add Ons" ref="button1" type="button"></input>
      </div>
    )
  }
}
export default Buttons;

我在反应类中有这两个按钮。下面给出了css。我想要做的是在我点击它的任何按钮应该变成橙色而其他按钮应该变成白色。最初，“类别”按钮为橙色，“插件”按钮为白色。我试着调用一个函数onClick来改变它的类，但它如何改变其他按钮的类。

.button2 { 
  border: none;
  padding: 11px 32px;
  text-align: center;
  text-decoration: none;
  line-height: 14px;
  font-family: Roboto-Regular;
  font-size: 12px;
  border-radius: 2px 0 0 2px;
  display: inline-block;
  float: left;
}

.button1 {
  background-color:#F6A623;  
  color: white;
}

.button2 {
  background-color:white; 
  color: black;
}

Answer 1

您需要跟踪班级中的按钮状态。当调用onClick时，设置你的状态。

onButton1Click（）{
this.setState（{button1Down：true}）;
}
然后在渲染调用中，您需要使用此状态设置要应用于按钮的类名。

render（）{

让button1ClassName =＆＃39; button1＆＃39;;

if（this.state.button1Down）{ button1ClassName + =＆＃39; button-down＆＃39 ;; }

返回......

Answer 2

可以通过使用组件内部状态+ classnames库轻松实现：

class Buttons extends Component {
    constructor(props) {
     super(props);
     this.onButtonClick = this.onButtonClick.bind(this);
     this.state = {
        selectedButton: 'categories'
     }
    }
 onButtonClick(e) {
    this.setState({
       selectedButton: e.target.value
    });
    if (e.target.value === 'categories') {
       this.props.get_menu_items_api();   
    } else {
       this.props.get_addons_items_api();
    }
 }
 render() {
  return (
   <div className="displayButtons">
    <input className={classnames({'button': true, 'selected': this.state.selectedButton === 'categories'} onClick={onButtonClick} 
      value="Categories" type="button" ref="button"></input>
    <input className={classnames({'button': true, 'selected': this.state.selectedButton === 'addons'})} onClick={onButtonClick} 
      value="Add Ons" ref="button1" type="button"></input>
   </div>
   )
  }
}

Answer 3

您可以保存橙色按钮的组件标识符的状态，并使用onClick更改它。

<强>组件：

class App extends React.Component{
  constructor(){
    super();
    this.state = {
      orangeButtonId: null
    }
    this.setOrangeButton = this.setOrangeButton.bind(this);
  }
  setOrangeButton(id){
    this.setState({orangeButtonId: id});
  }
  render(){
    return(
      <div>
          <input className={this.state.orangeButtonId === 1? "button1 orange" : "button1"} onClick={() => this.setOrangeButton(1)} value="Categories" type="button" ref="button" />
          <input className={this.state.orangeButtonId === 2? "button2 orange" : "button2"} onClick={() => this.setOrangeButton(2)} 
            value="Add Ons" ref="button1" type="button" />
        </div>
    )
  }
}

和样式：

input[type="button"]{
  background-color: white;
}
input[type="button"].orange{
  background-color: orange;
}

检查小提琴https://jsfiddle.net/69z2wepo/83389/。

单击两个按钮时切换两个按钮的css类

3 个答案: