使用钩子设置active className

Posted 2021-05-03

我试图将我的一些类-组件转换为功能-组件.但我的 "toogle "活动类不能用钩子工作，请问我做错了什么，这是我的脚本。

import React from "react";
import "./styles.css";

export default class ActiveState extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeIndex: 0
    };
  }

  handleOnClick = index => {
    this.setState({ activeIndex: index });
  };

  render() {
    const boxs = [0, 1, 2, 3];
    const box = boxs.map((el, index) => {
      return (
        <button
          key={index}
          onClick={this.handleOnClick.bind(this, index, this.props)}
          className = {this.state.activeIndex === index ? "active" : "unactive"}
        >
          {el}
        </button>
      );
    });
    return <div className="App">{box}</div>;
  }
}

这是我尝试使用钩子，但不工作。

import React, { useState } from "react";
import "./styles.css";

export default function ActiveHooks() {
  const [activeIndex, setActiveIndex] = useState(0);

  const handleOnClick = index => {
    setActiveIndex({ index });
  };

  const boxs = [0, 1, 2, 3];
  const box = boxs.map((el, index) => {
    return (
      <button key={index} onClick={handleOnClick} className= {activeIndex === index ? "active" : "unactive"}>
        {el}
      </button>
    );
  });
  return <div className="App">{box}</div>;
}

先谢谢你。

答案

试试这个。

function App() {
  const [activeIndex, setActiveIndex] = React.useState(0);

  const handleOnClick = index => {
    setActiveIndex(index); // remove the curly braces
  };

  const boxs = [0, 1, 2, 3];
  const box = boxs.map((el, index) => {
    return (
      <button
        key={index}
        onClick={() => handleOnClick(index)} // pass the index
        className={activeIndex === index ? "active" : "unactive"}
      >
        {el}
      </button>
    );
  });
  return <div className="App">{box}</div>;
}

ReactDOM.render( <App /> , document.getElementById('root'))

.active {
  background-color: green
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

另一答案

  setActiveIndex(index);

去掉大括号。你把你的钩子更新为{index: 1}而不是1，如果你点击了1。

以上是关于使用钩子设置active className的主要内容，如果未能解决你的问题，请参考以下文章

Android 返回堆栈管理打印 Android 中当前运行的 Activity 任务栈信息 | Activity 任务栈信息分析 | Activity 在相同 Stack 中的不同 Task(代码片

如果我使用带有 .active 属性的 CSS 模块，我应该在 className 中添加啥

在 useState 钩子中反应设置状态

Unity中解决“SetDestination“ can only be called on an active agent that has been placed on a NavMesh(代码片

错误记录Android 应用中启动 FlutterActivity 报错 ( have you declared this activity in your AndroidManifest )(代码片

vue.js生命周期钩子函数及缓存