React组件中实现ReturnBtn点击返回默认按钮状态的求助

需求很明确：RightBody组件默认显示带Yes、No按钮的Button1，点击Yes后切换到带输入框的InputCont；现在要让点击InputCont里的ReturnBtn时，切回初始的双按钮界面。

修改步骤 #

• 新增一个重置状态的函数，把isClickedYes设回初始值
• 将这个函数作为props传给ReturnBtn组件
• 确保ReturnBtn组件能响应点击事件，触发重置逻辑

修改后的完整代码 #

RightBody组件

const DEFAULT_IS_CLICKED = false;
function RightBody() {
  const [isClickedYes, setIsClickedYes] = React.useState(DEFAULT_IS_CLICKED);

  const onClickYes = () => {
    setIsClickedYes(true);
  };

  // 新增重置状态的函数
  const handleReturnClick = () => {
    setIsClickedYes(DEFAULT_IS_CLICKED);
  };

  return (
    <Card>
      <SmallCircle />
      <Div>
        <CardContent number={"1."} title={"Course of study in school:"} />
        <CardContent number={"2."} title={"Are you a student?"} />
        <div>
          {isClickedYes ? (
            <InputCont>
              <TickImg src={ticked} />
              <Tick>Yes</Tick>
              <Input1 name="text" placeholder="course studied in school" />
              <Input2
                type="text"
                onFocus={(e) => {
                  e.currentTarget.type = "date";
                  e.currentTarget.focus();
                }}
                placeholder="Expected graduation date"
              />
              {/* 传递重置函数给ReturnBtn */}
              <ReturnBtn src={back} onClick={handleReturnClick} />
            </InputCont>
          ) : (
            <Button1 onClickYes={onClickYes} />
          )}
        </div>
        <Sec1>
          <CardContent number={"3."} title={"Did you graduate?"} />
          <Button2 />
        </Sec1>
        <Sec2>
          <CardContent number={"4."} title={"Did you graduate?"} />
          <Button3 />
        </Sec2>
      </Div>
    </Card>
  );
}

export default RightBody;

Button1组件（原代码无需修改）

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

ReturnBtn组件（需补充点击事件支持）

如果ReturnBtn是自定义组件，要确保它能接收并传递onClick事件，示例代码如下：

function ReturnBtn({ src, onClick }) {
  return <button onClick={onClick}><img src={src} alt="返回" /></button>;
}

原理说明 #

点击ReturnBtn时，触发handleReturnClick函数，通过setIsClickedYes将状态重置为初始的false，组件重新渲染后就会回到显示Button1的初始状态。

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