在活动内容状态之间切换答案

【问题标题】：Toggle between active content state在活动内容状态之间切换
【发布时间】：2021-05-09 04:42:25
【问题描述】：

我正在用情感构建一个 React 选项卡导航组件。我无法找到可以让我：

最初隐藏除按钮之外的所有内容，并且不对按钮设置样式。
当您单击按钮时，激活样式并显示与该按钮关联的内容。
最后，当您在外部单击或输入为空时重置为初始状态。

代码如下： Code

import React, { useState } from "react";
import ReactDOM from "react-dom";
import styled from "@emotion/styled";

import "./styles.css";

const StyledShowButton = styled("button", {
  shouldForwardProp: (prop) => ["active"].indexOf(prop) === -1
})`
  color: ${({ active }) => (active ? "red" : "black")};
`;

function App() {
  const [active, setActive] = useState(0);
  const [showInput, setShowInput] = useState(false);

  const handleInputChange = (e) => {
    if (e.target.value < 1) {
      console.log("Reset Everyting");
    }
  };

  const handleTabClick = (e) => {
    const index = parseInt(e.target.id, 0);
    if (index !== active) {
      setActive(index);
    }

    if (!showInput) {
      setShowInput(!showInput);
    }
  };
  return (
    <div className="App">
      <StyledShowButton
        type="button"
        id={0}
        active={active === 0}
        onClick={handleTabClick}
      >
        First
      </StyledShowButton>

      <StyledShowButton
        type="button"
        id={1}
        active={active === 1}
        onClick={handleTabClick}
      >
        Second
      </StyledShowButton>

      {/* CONTENT */}
      {active === 0 ? (
        <input placeholder="First input" onChange={handleInputChange} />
      ) : (
        <input placeholder="Second input" onChange={handleInputChange} />
      )}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

就问我是不是说的不够清楚，

先谢谢了！

埃里克

【问题讨论】：

标签： javascript css reactjs emotion

【解决方案1】：

您首先可以通过为活动状态分配一个空值来隐藏 inpts。也可以从 1 开始初始化值，这样 id 和 state 就不会混淆了。我做了安排。您可以查看下面的代码。

您也可以从此链接查看它。 Code:

function App() {
  const [active, setActive] = useState(null);
  const [showInput, setShowInput] = useState(false);

  const handleInputChange = (e) => {
    if (e.target.value < 1) {
      setActive(null);
    }
  };

  const handleTabClick = (e) => {
    const index = parseInt(e.target.id, 0);
    if (index !== active) {
      setActive(index);
    }
    if (!showInput) {
      setShowInput(!showInput);
    }
  };

  return (
    <div className="App">
      <StyledShowButton
        type="button"
        id={1}
        active={active === 1}
        onClick={handleTabClick}
      >
        First
      </StyledShowButton>
      <StyledShowButton
        type="button"
        id={2}
        active={active === 2}
        onClick={handleTabClick}
      >
        Second
      </StyledShowButton>
      {/* CONTENT */}
      {active &&
        (active === 1 ? (
          <>
            <input placeholder="First input" onChange={handleInputChange} />
          </>
        ) : (
          <input placeholder="Second input" onChange={handleInputChange} />
        ))}
    </div>
  );
}

【讨论】：