Question

我使用Ant Design，并单击“ antd”按钮，我想触发自定义“ antd”步骤组件中的更改步骤。我该怎么做呢？谢谢！（https://ant.design/components/button/）+（https://ant.design/components/steps/）

const StepOne = ({ onClick }: any) => {
              return (
                <div>
                  <Button type='primary' onClick={onClick}>
                    StepOneLogIn
                  </Button>
                  <Button>StepOneRegister</Button>
                </div>
              );
            };
export const Order = () => {
          const [currentStep, setCurrentStep] = useState(0);

          //Final
          return (
            <div>
              <Steps size='small' current={currentStep}>
                <Step title='text' />
                <Step title='text' />
                <Step title='text' />
                <Step title='text' />
              </Steps>

              <Divider />
              <div>
                {currentStep === 0 ? (
                  <StepOne onClick={setCurrentStep(currentStep + 1)} />
                ) : null}
              </div>
              <div>{currentStep === 1 ? <StepTwo /> : null}</div>
              <div>{currentStep === 2 ? <StepThree /> : null}</div>
              <div>{currentStep === 3 ? <StepFour /> : null}</div>
            </div>
          );
        };

Answer 1

您不小心将setCurrentStep的返回值而不是函数传递给onClick处理程序。你应该改变

<StepOne onClick={setCurrentStep(currentStep + 1)} />

对此

<StepOne onClick={() => setCurrentStep(currentStep + 1)} />

() => setCurrentStep(currentStep + 1)创建一个函数，该函数将调用您的setCurrentStep函数，并将该函数传递给onClick道具，而您之前的代码是直接调用setCurrentStep并传递返回到onClick道具的值，当按下按钮时什么也不会发生。

除此之外，其余代码看起来很适合尝试从孩子的StepOne组件触发操作

TypeScript如何从另一个组件触发组件中的动作

1 个答案: