Question

我在react中使用类组件，并且想知道如何将css类添加到map语句内的当前即clicked元素中。我想用状态来做。

    <div key={q.id} id={q.id}>
                        <h2 className={this.state.title}>{q.title}</h2>
                        <h3>{q.questionText}</h3>
                        <div key={q.id}>
                            {q.options.map((opt, index) => (
                                <div
                                    key={opt.id}
                                    val={opt.val}
                                    ref={this.options}

                                    className={index === this.state.clickedItem ? 'myclass' : null}
                                    onClick={() => this.setState({ clickedItem: index })}>

                                    <p
                                        onClick={this.submitQuestion}
                                        ref={this.correctRef}

                                    >
                                        {opt.text}
                                    </p>
                                </div>
                            ))}
                        </div>

Answer 1

这里是您的状态

state = {clickedItem: 0}

在渲染中

yourArray.map((el, index) => {
  <div 
  onClick={() => this.setState({clickedItem: index})} 
  key={index} 
  className={index === this.state.clickedItem ? 'Your ClassName' : null}>
   {el.name}
  </div>
})

Answer 2

在函数中使用 useState 钩子，没有类。希望这能有所帮助。

https://codesandbox.io/s/blissful-boyd-6px43?file=/src/App.js

import "./styles.css";
/*
.is-checked {
  background-color: #901c1c;
  color: white;
}
*/


import React, { useState } from "react";

const App = () => {
  const tags = ["portrait", "événements", "voyage", "animaux"];
  const [clickedItem, setClickedItem] = useState(null);

  const handleCSS = (e) => {
    e.preventDefault();
    let selectedTag = e ? parseInt(e.target.id, 10) : null;
    setClickedItem(selectedTag);
    console.log(">> clickedItem", clickedItem);
  };

  return (
    <>
      <div className="App">
        <h1>Hello !</h1>
      </div>

      <div>
        {tags.map((tag, index) => {
          return (
            <button
              type="button"
              key={index}
              onClick={handleCSS}
              id={index}
              className={index === clickedItem ? "is-checked" : null}
            >
              {`#${tag}`}
            </button>
          );
        })}
      </div>
    </>
  );
};

export default App;

如何将类添加到map语句中的当前元素

2 个答案: