Реагируйте Js - Как изменить URL при нажатии на шаговый элемент ant design? - PullRequest
Новая
       22

Реагируйте Js - Как изменить URL при нажатии на шаговый элемент ant design?

2 голосов
/ 03 апреля 2020

Контекст:

Используя Ant Design Stepper, я могу щелкнуть по каждому шагу, и Stepper обновит и перейдет к этому шагу, чтобы отразить это. Теперь я пытаюсь добавить дополнительную функциональность, при которой после нажатия на шаг URL-адрес также изменяется. Идея заключается в том, что изменение URL-адреса приведет к отображению определенных компонентов на странице. Я пытаюсь сделать это, оборачивая значок в каждом шаге ссылкой.

Проблема

Теперь, когда я нажимаю на шаг, URL-адрес обновляется, но Сам Stepper не обновляется и переход к шагу отражает это. Если я снова нажму на тот же Шаг, Stepper обновится и перейдет к нему. Я надеюсь выполнить это sh, не нажимая дважды на шаг.

Вот код 

<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>
    }
  />

Буду очень признателен за любые мысли или идеи.

Спасибо за ваше время.

Ответы [ 3 ]

2 голосов
/ 03 апреля 2020

Мне кажется, что ваша проблема связана с тем, что вы оборачиваете только иконки значком, поэтому нажатие на ярлык не приведет к изменению маршрута. Таким образом, вы можете использовать этот шаблон, чтобы связать весь шаг: 

<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>
    }
  />

Я создал эту упрощенную песочницу на основе кода, предоставленного вами, чтобы продемонстрировать, как это работает. 1006 *

Еще одна вещь, которую вы можете сделать, это использовать метод react-router history.push(), чтобы указать sh ссылку, которая вам нравится на 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"
>

Если вы go для второго решения, вам даже не нужно использовать Link s.

1 голос
/ 04 апреля 2020

Сделайте это просто: 

<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>
    }
  />

Я думаю, что это должно работать.

0 голосов
/ 04 апреля 2020

Вы пытаетесь прикрепить ссылку к значку Step, это означает, что вы не можете изменить состояние Steps, нажав на description, только icon работает.

Это способ использовать (/demo?step=1), вы можете реализовать еще один использовать ha sh (/demo#1) себя 

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"));

Проверьте демонстрацию на codesandbox :

...