如何添加切换功能，以改变按钮的背景色在它点击时的反应？

Question

如何添加更改按钮背景色的切换函数。有一个isHeld方法，我尝试用样式变量连接按钮以切换背景色。组件中的每个元素都有一个唯一的键。这是我的代码app.js，question.jsx

app.js

​

import React from "react";
import "./app.css";
import Question from "./components/question/Question";
import { useState, useEffect } from "react";
import { nanoid } from "nanoid";

const id = nanoid()
export default function App() {
  const [data, setData] = useState([]);

  function addIds(data) {
    return data.map((currentTask) => {
      const id = nanoid();
      return { id, ...currentTask, isHeld: false };
    });
  }

  function fetchData(endpoint) {
    
    fetch(endpoint)
      .then((response) => response.json())
      .then((data) => {
        const tasks = addIds(data.results);
        setData(tasks);
      });
  }

  useEffect(() => {
    const endpoint = "https://opentdb.com/api.php?amount=5";
    fetchData(endpoint);
  }, []);

  function hold(e) {
    console.log(e.target.dataset.id);
    
  }

  function buildElements(data) {
    return data.map((quiz) => {
      const { question, correct_answer, incorrect_answers, isHeld, } = quiz;

      return (
        <Question
          key={nanoid()}
          question={question}
          correct_answer={correct_answer}
          incorrect_answers={incorrect_answers}
          hold={hold}
          isHeld={isHeld}
      
        />
      );
    });
  }

  if (!data.length) return <div />;

  return (<div className="app">

  {buildElements(data)}

  </div>);
}

​

Question.jsx

​

import { nanoid } from "nanoid";
import React from "react";
import "./question.css";

const id = nanoid();

export default function Question(props) {
  const { hold, question, correct_answer, incorrect_answers, isHeld} = props;

  const styles = {
   backgroundColor: isHeld ? "#59E391" : "black",
  };

  return (
    <div className="question">
      <h2 className="question-title">{question}</h2>

      <button
        key={nanoid()}
        data-id={nanoid()}
        className="correct-answer"
        onClick={hold}
        style={styles}
      >
        {correct_answer}
      </button>

      <div className="wrong-answers">
        {incorrect_answers.map((ia) => {
          const id = nanoid();
          return (
            <button
              key={id}
              data-id={id}
              className="incorrect-answer"
              onClick={hold}
              style={styles}
            >
              {ia}
            </button>
          );
        })}
      </div>
    </div>
  );
}

​

Answer 1

您必须在onClick hold部分中使用箭头函数，如下所示。我认为您在循环中编写了工作随叫保持函数。

onClick={()=>hold}

Answer 2

我觉得这样的东西能帮到你。

       <button
        key={nanoid()}
        data-id={nanoid()}
        className="correct-answer"
        onClick={() => setColor((prev) => prev === 'red' ? 'green' : 'red')}
        style={{backgroundColor: color;}}
      >

您可以添加一个带有您想要的颜色的状态，并在任何您想要的状态中使用它。

也可以在所需的索引处修改数据。

 function hold(index) {
   const newData = [...data]
   newData[index] = {...data[index], isHeld: false} // Your logic
   setData(newData)
  }