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 prop, тогда как ваш предыдущий код напрямую вызывал setCurrentStep и передавал возвращаемое значение этого в onClick prop, в результате чего ничего не происходило при нажатии кнопки.

Кроме этого, остальная часть вашего кода выглядит правильно для попытки вызвать действие от вашего ребенка StepOne component