“反应手风琴”-只能打开一个，但不能关闭当前打开的

Question

所以我正在制作手风琴(问答)。我这里有两个要求。

1. 一次只能显示一个问题(其他问题必须关闭)，我已经成功地处理了这个问题。只显示匹配的ID。

但是，我在这里的问题是，‘我不能关闭当前正在显示的那个！’目前关闭显示的唯一方法是打开另一个:我试图添加memoryState和缓存当前id等等。并尝试使用更复杂的三元体系等。但我有点迷路了。我觉得我错过了一个简单的片段..。(我试着在教程的基础上建立起来)

// App.js

import React, { useState } from 'react';
import data from './data';
import SingleQuestion from './Question';
function App() {
    const [questions, setQuestions] = useState(data);

    const [idFlag, setIdFlag] = useState(null);

    const toggleAnswer = (id) => {
        setIdFlag(id);
    };

    return (
        <main>
            <div className='container'>
                <h3>Questions and Answers About Login</h3>
                <div>
                    {questions.map((question) => {
                        // const { id, title, info } = question;
                        return (
                            <SingleQuestion
                                {...question}
                                toggleAnswer={toggleAnswer}
                                idFlag={idFlag}
                            />
                        );
                    })}
                </div>
            </div>
        </main>
    );
}

export default App;

// SingleQuestion

import React, { useState } from 'react';
import { AiOutlineMinus, AiOutlinePlus } from 'react-icons/ai';
const Question = ({ id, title, info, toggleAnswer, idFlag }) => {
    // const [memory, setMemory] = useState({});

    return (
        <>
            <div className='question' key={id}>
                <header>
                    <h4>{title}</h4>
                    <button
                        className='btn'
                        onClick={() => {
                            toggleAnswer(id);
                        }}
                    >
                        {id === idFlag ? <AiOutlineMinus /> : <AiOutlinePlus />}
                    </button>
                </header>
                <p>{id === idFlag && info}</p>
            </div>
        </>
    );
};

export default Question;

//数据

const questions = [
  {
    id: 1,
    title: 'Do I have to allow the use of cookies?',
    info:
      'Unicorn vinyl poutine brooklyn, next level direct trade iceland. Shaman copper mug church-key coloring book, whatever poutine normcore fixie cred kickstarter post-ironic street art.',
  },
  {
    id: 2,
    title: 'How do I change my My Page password?',
    info:
      'Coloring book forage photo booth gentrify lumbersexual. Migas chillwave poutine synth shoreditch, enamel pin thundercats fashion axe roof party polaroid chartreuse.',
  },
]

export default questions

Answer 1

如果问题已经处于活动状态，您可以再次将活动标志设置为null (这是标志的默认值/初始值，并且与任何问题的id不匹配)：

import React from 'react';
import { AiOutlineMinus, AiOutlinePlus } from 'react-icons/ai';

const Question = ({ id, title, info, toggleAnswer, idFlag }) => {
  const isThisActive = id === idFlag;
  return (
    <>
      <div className="question" key={id}>
        <header>
          <h4>{title}</h4>
          <button
            className="btn"
            onClick={() => {
              toggleAnswer(isThisActive ? null : id);
            }}
          >
            {isThisActive ? <AiOutlineMinus /> : <AiOutlinePlus />}
          </button>
        </header>
        <p>{isThisActive && info}</p>
      </div>
    </>
  );
};

export default Question;