Kontekst:

Używając Ant Design Stepper, mogę kliknąć każdy krok, a Stepper zaktualizuje się i przejdzie do tego kroku, aby to odzwierciedlić. Teraz próbuję dodać dodatkową funkcjonalność, w której po kliknięciu kroku zmienia się również adres URL. Chodzi o to, że zmiana adresu URL będzie kierować do określonych komponentów wyświetlanych na stronie. Próbuję to zrobić, zawijając ikonę w każdym kroku za pomocą linku.

Problem

Teraz, kiedy klikam krok, adres URL aktualizuje się, ale sam Stepper nie aktualizuje się i przechodzi do kroku odzwierciedla to. Jeśli ponownie kliknę ten sam krok, Stepper zaktualizuje się i przejdzie do niego. Mam nadzieję, że uda mi się to osiągnąć bez konieczności dwukrotnego klikania kroku.

Oto kod

<Steps
  size="small"
  current={current}
  onChange={setCurrent}
  type="navigation"
>
  <Steps.Step
    title="People"
    icon={
      <Link to="/workshop/client-portal/stage/file-management/people">
        <Dataset.Icon type="people" />
      </Link>
    }
  />
  <Steps.Step
    title="Positions"
    icon={
      <Link to="/workshop/client-portal/stage/file-management/positions">
        <Dataset.Icon type="positions" />
      </Link>
    }
  />
  <Steps.Step
    title="Links"
    icon={
      <Link to="/workshop/client-portal/stage/file-management/Links">
        <Dataset.Icon type="links" />
      </Link>
    }
  />
  <Steps.Step
    title="Lookups"
    icon={
      <Link to="/workshop/client-portal/stage/file-management/lookups">
        <Dataset.Icon type="lookups" />
      </Link>
    }
  />

Wszelkie przemyślenia i spostrzeżenia będą bardzo mile widziane.

Dziękuję za Twój czas.

2
Tyler Turden 3 kwiecień 2020, 21:43

3 odpowiedzi

Najlepsza odpowiedź

Wydaje mi się, że Twój problem wynika z tego, że zawijasz tylko swoje ikony linkiem - więc kliknięcie etykiety nie spowoduje zmiany trasy. Zasadniczo możesz użyć tego wzorca, aby połączyć cały krok:

<Steps.Step
    title={
      <Link to="/workshop/client-portal/stage/file-management/people">
        People
      </Link>
    }
    icon={
      <Link to="/workshop/client-portal/stage/file-management/people">
        <Dataset.Icon type="people" />
      </Link>
    }
  />

Utworzyłem tę uproszczoną piaskownicę na podstawie podanego przez Ciebie kodu, by pokazać, jak to działa.

Inną rzeczą, którą możesz zrobić, jest użycie metody history.push() firmy react-router w celu przekazania żądanego linku w Steps onChange:

<Steps
  size="small"
  current={current}
  onChange={(id)=>{
     setCurrent(id);
     history.push(
     /* the path you want to push to based on the route id */
    )
   }}
  type="navigation"
>

Jeśli wybierzesz drugie rozwiązanie, nie musisz nawet używać Link s.

3
itaydafna 3 kwiecień 2020, 21:03

Próbujesz dołączyć link do ikony kroku, co oznacza, że nie możesz zmienić stanu Steps, klikając description, tylko icon Pracuje.

To jest sposób użycia zapytania (/demo?step=1), możesz zaimplementować inny użyj skrótu (/demo#1) samodzielnie

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./styles.css";
import { Steps, Divider } from "antd";
import { BrowserRouter, Route, Link, useLocation } from "react-router-dom";
import { Layout } from "antd";
const { Header } = Layout;
const { Step } = Steps;
function useStep() {
  const params = new URLSearchParams(useLocation().search);
  return parseInt(params.get("step"), 10);
}
const App = () => (
  <BrowserRouter>
    <Header>
      <Link to="/demo">Demo</Link>
    </Header>
    <Route path={"/demo"} component={Demo} />
  </BrowserRouter>
);
const StepContent = () => {
  const step = useStep();
  return <div>This is Step {step}</div>;
};
const Demo = ({ match, history }) => {
  const step = useStep();
  // Init current with step get from the URL 
  // so you can jump to the step 2 by enter the link on the address bar
  const [current, setCurrent] = React.useState(step);
  const onChange = current => {
    setCurrent(current);
    history.push(`${match.path}?step=${current}`);
  };
  return (
    <div style={{ paddingTop: 20 }}>
      <Steps current={current} onChange={onChange}>
        <Step title="Step 0" description="This is a description." />
        <Step title="Step 1" description="This is a description." />
        <Step title="Step 2" description="This is a description." />
      </Steps>
      <Divider />
      <Route path={`${match.path}`} exact component={StepContent} />
    </div>
  );
};
ReactDOM.render(<App />, document.getElementById("root"));

Sprawdź demo na odesandbox :

0
Foxeye.Rinx 3 kwiecień 2020, 23:13

Uprość to:

<Steps
  size="small"
  current={current}
  onChange={setCurrent}
  type="navigation"
>
  <Steps.Step
    icon=""
    title={
      <Link to="/workshop/client-portal/stage/file-management/people">
        <Dataset.Icon type="people" /> People
      </Link>
    }
  />
  <Steps.Step
    icon=""
    title={
      <Link to="/workshop/client-portal/stage/file-management/positions">
        <Dataset.Icon type="positions" /> Positions
      </Link>
    }
  />
  <Steps.Step
    icon=""
    title={
      <Link to="/workshop/client-portal/stage/file-management/Links">
        <Dataset.Icon type="links" /> Links
      </Link>
    }
  />
  <Steps.Step
    icon=""
    title={
      <Link to="/workshop/client-portal/stage/file-management/lookups">
        <Dataset.Icon type="lookups" /> Lookups
      </Link>
    }
  />

Myślę, że to powinno działać.

1
Fatemeh Qasemkhani 3 kwiecień 2020, 21:11