时间戳

首页 > 解决方案 > 一次只显示一个答案

javascript - 一次只显示一个答案

问题描述

我的页面上有一个问题列表，单击问题会显示答案。我想一次只显示一个答案，所以当用户点击一个问题时，页面只显示该问题的答案并隐藏其余答案。

数据文件

const Data = [
    {
        q:'How many team numbers can I invite', 
        a:'Probably 5 is possible '
    },
    {
        q:'How do I reset my password',
        a:'Click “Forgot password” from the login page or “Change password” from your profile page.A reset link will be emailed to you.'
    },
    {
        q:'Can I cancel my subscription?', 
        a:'Yes! Send us a message and we’ll process your request no questions asked.'
    },
    {
        q:'Do you provide additional support?', 
        a:'Chat and email support is available 24/7. Phone lines are open during normal business hours.'
    }
  ]

这是 app.js 文件

      <div className="body">
        <div className="card">
            <div className="picWrapper">
              <img className="women" src={pic1} alt="" />
              <img className="box" src={pic2} alt="" />
              <img className="shadow" src={pic3} alt="" />
            </div>
            <div className="content">
              <h1>FAQ</h1>
              {Data.map((faq,i) => (<Question key={"faq_" + i} question={faq.q} answer={faq.a} />))}

            </div>
          </div>
        </div>


      )

问题部分-----------

 const [open,setOpen] = useState(false)

        const handleClick = () =>{
              setOpen(!open)

        }
        return (
            <div className="container">
                <div className="text">
                    <p className="question" 
                    style={{ fontWeight: open ? '700' : '400'}} onClick={handleClick}>{props.question}?</p>
                    <p className="answer" 
                    style={{ display: open ? 'block' : 'none',color: open ? 'hsl(237, 12%, 33%)' : 'hsl(240, 6%, 50%)'}}> {props.answer}</p>
                </div>
                <img className="arrow" src={arrow} alt="" onClick={handleClick} style={{transform: open ? 'scaleY(-1)':'scaleY(1)',transition:'all 0.3s ease-in-out'}} />
            </div>

        )

我需要一种可以帮助我实现这种方法的方法，因为现在当我打开所有问题时，它就会脱离 div

netlify 链接 https://amazing-wright-0ca5db.netlify.app/

标签： javascriptreactjsreact-hooks

解决方案

您需要从问题组件中删除您的状态并将其提升。（把它放在你的主应用程序中）

因此，在您的主应用程序中有一个当前问题打开状态：

 const [openQuestion, setOpenQuestion] = useState(1);

然后在您的问题组件上，检查 currentOpenQuestion 是否等于索引。如果是，它应该打开，如果不是，它应该关闭。然后在此处添加一个 onClick 并在单击时将状态更改为当前未解决问题的组件中。

 {Data.map((faq, i) => (
        <Question
          onClick={(id) => setOpenQuestion(id)}
          key={"faq_" + i}
          id={i}
          open={openQuestion === i}
          question={faq.q}
          answer={faq.a}
        />
      ))}

const Question = ({ question, answer, open, onClick, id }) => {
  return (
    <div className="container">
      <div className="text">
        <p
          className="question"
          style={{ fontWeight: open ? "700" : "400" }}
          onClick={() => onClick(id)}
        >
          {question}?
        </p>
        <p
          className="answer"
          style={{
            display: open ? "block" : "none",
            color: open ? "hsl(237, 12%, 33%)" : "hsl(240, 6%, 50%)"
          }}
        >
          {" "}
          {answer}
        </p>
      </div>
      <img
        className="arrow"
        src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fthenounproject.com%2Fterm%2Fright-arrow%2F&psig=AOvVaw1tuHEwUUcX4nlUkFuhtuhb&ust=1612026978926000&source=images&cd=vfe&ved=2ahUKEwimuuzM0sHuAhWIh54KHQ6RBasQjRx6BAgAEAc"
        alt=""
        style={{
          transform: open ? "scaleY(-1)" : "scaleY(1)",
          transition: "all 0.3s ease-in-out"
        }}
      />
    </div>
  );
};
export default Question;

快速而肮脏的代码示例：https ://codesandbox.io/s/awesome-cherry-syk9t?file=/src/question.js:42-1081

推荐阅读