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

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 并将其返回值传递给 @ 987654329@ prop，导致按下按钮时没有任何反应。

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