React实现点击Yes按钮切换输入框并支持回退的功能需求

1. 初始按钮组件代码（Button1.js） #

以下是包含按钮元素的初始代码

import React, { useState } from "react";
import "./button.css";

function Button1() {
  return (
    <div className="buttons">
      <button>yes</button>
      <button>No</button>
    </div>
  );
}

export default Button1;

2. 调用组件代码（RightBody.js） #

以下是调用并渲染按钮组件的代码，逻辑需在此处实现

import React from "react";
import styled from "styled-components";
import Button1 from "./button/Button1";
import Button2 from "./button/Button2";
import Button3 from "./button/Button3";
import CardContent from "./CardContent";

function RightBody() {
  return (
    <Card>
      <SmallCircle />
      <Div>
        <CardContent number="1." title="在校所学课程:" />
        <CardContent number="2." title="你是学生吗?" />
        <Button1 />
        <Sec1>
          <CardContent number="3." title="你毕业了吗?" />
          <Button2 />
        </Sec1>
        <Sec2>
          <CardContent number="4." title="你毕业了吗?" />
          <Button3 />
        </Sec2>
      </Div>
    </Card>
  );
}

export default RightBody;

3. 样式代码 #

以下是RightBody组件的样式代码

const Div = styled.div`
  margin-top: -6%;
`;
const Card = styled.div`
  position: absolute;
  width: 659px;
  height: 684px;
  left: 650px;
  top: 220px;
  background: #ffffff;
  box-shadow: 0px 4px 29px #f0f3ff;
  border-radius: 35px;
  &:hover {
    border: 1px solid blue;
  }
`;
const SmallCircle = styled.div`
  position: absolute;
  height: 32px;
  width: 32px;
  left: 92%;
  top: 3%;
  border-radius: 0px;

  background: linear-gradient(180deg, #800165 0%, #d3014e 100%);
  border-radius: 50px;
  &:hover {
    border: 1px solid blue;
  }
`;
const Sec1 = styled.div`
  margin-top: -11%;
`;
const Sec2 = styled.div`
  margin-top: -12%;
`;

4. 需求说明 #

点击Yes按钮时，移除原有两个按钮并显示两个输入框；输入框旁需添加小图标，点击图标可切换回初始的Yes/No按钮状态

效果描述 #

• 点击前：显示"Yes"和"No"两个按钮
• 点击后：隐藏按钮，显示两个带切换图标的输入框

修改Button1组件，添加状态切换逻辑 #

import React, { useState } from "react";
import "./button.css";

function Button1() {
  // 管理显示状态：false显示按钮，true显示输入框
  const [showInputs, setShowInputs] = useState(false);

  // 点击Yes按钮切换到输入框状态
  const handleYesClick = () => {
    setShowInputs(true);
  };

  // 点击图标切换回按钮状态
  const handleToggleBack = () => {
    setShowInputs(false);
  };

  return (
    <div className="buttons-container">
      {!showInputs ? (
        <div className="buttons">
          <button onClick={handleYesClick}>yes</button>
          <button>No</button>
        </div>
      ) : (
        <div className="input-group">
          <div className="input-wrapper">
            <input type="text" placeholder="输入内容1" />
            {/* 用↺作为切换图标，可替换为自定义图标组件 */}
            <span className="toggle-icon" onClick={handleToggleBack}>↺</span>
          </div>
          <div className="input-wrapper">
            <input type="text" placeholder="输入内容2" />
            <span className="toggle-icon" onClick={handleToggleBack}>↺</span>
          </div>
        </div>
      )}
    </div>
  );
}

export default Button1;

添加对应CSS样式（button.css） #

.buttons-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.buttons {
  display: flex;
  gap: 15px;
}

.buttons button {
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.input-group {
  display: flex;
  gap: 20px;
}

.input-wrapper {
  position: relative;
}

.input-wrapper input {
  padding: 8px 30px 8px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.toggle-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #666;
  font-size: 16px;
}

.toggle-icon:hover {
  color: #333;
}

说明 #

• 通过useState维护显示状态，实现按钮与输入框的切换逻辑
• 输入框旁的切换图标点击后，会重置状态回到初始按钮界面
• 样式可根据需求调整布局、颜色、图标样式等

内容的提问来源于stack exchange，提问作者Kukoyi Tomiwa