ReactJs为按钮添加活动类

ReactJs adding active class to button

本文关键字：活动 添加 按钮 ReactJs      更新时间：2023-09-26

我有五个动态创建的按钮。我的目标是:当任何按钮被点击添加活动类到它，当然，如果任何其他有活动类删除它。我怎样才能做到呢?

<div>
    {buttons.map(function (name, index) {
        return <input type="button" value={name} onClick={someFunct} key={ name }/>;
   })}
</div>

您需要为您的组件引入状态，并在onClick事件处理程序中设置它。例如渲染方法的输出:

<div>
    {buttons.map(function (name, index) {
        return <input
                 type="button"
                 className={this.state.active === name ? 'active' : ''}
                 value={name}
                 onClick={() => this.someFunct(name)}
                 key={ name } />;
   })}
</div>

事件处理程序(元素方法):

someFunct(name) {
    this.setState({ active: name })
}

添加活动类最简单的方法之一是在每个开关上设置状态并更改该状态，通过状态值可以更改项目的活动类。

我也有一个相同的问题，在列表中切换活动类。

例子: 

var Tags = React.createClass({
  getInitialState: function(){
    return {
      selected:''
    }
  },
  setFilter: function(filter) {
    this.setState({selected  : filter})
    this.props.onChangeFilter(filter);
  },
  isActive:function(value){
    return 'btn '+((value===this.state.selected) ?'active':'default');
  },
  render: function() {
    return <div className="tags">
      <button className={this.isActive('')} onClick={this.setFilter.bind(this, '')}>All</button>
      <button className={this.isActive('male')} onClick={this.setFilter.bind(this, 'male')}>male</button>
      <button className={this.isActive('female')} onClick={this.setFilter.bind(this, 'female')}>female</button>
      <button className={this.isActive('child')} onClick={this.setFilter.bind(this, 'child')}>child</button>
      <button className={this.isActive('blonde')} onClick={this.setFilter.bind(this, 'blonde')}>blonde</button>
     </div>
  }
});

希望这对你有帮助!

一个最简单的解决方案为react开发人员添加活动类到当前按钮(突出显示它)。 

const {useState,Fragment} = React;
const App = () => {
  const [active, setActive] = useState("");
 
  const handleClick = (event) => {
    setActive(event.target.id);
    
  }
    return (
      <Fragment>
      <button
        key={1}
        className={active === "1" ? "active" : undefined}
        id={"1"}
        onClick={handleClick}
      >
        Solution
      </button>
       <button
       key={2}
       className={active === "2" ? "active" : undefined}
       id={"2"}
       onClick={handleClick}
     >
      By
     </button>
      <button
      key={3}
      className={active === "3" ? "active" : undefined}
      id={"3"}
      onClick={handleClick}
    >
        Jamal
    </button>
</Fragment>
    );
}

 ReactDOM.render(
  <App/>,
  document.getElementById("react")
);
.active{
background-color:red;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
 <div id="react"></div>

相关文章：