Reactjs＆＃x2B;蚂蚁设计：连接两个ANTD组件

Question

我是一个新手，我需要一个问题，我需要从Ant Design中的Ant Design中连接两个组件（滑块和无线电按钮），并将它们合作在一起。因此，如果我选择“单选”按钮的选项之一，我希望滑块可以调整选择并相反。例如，如果我在第2022号广播按钮上选择，我希望滑块向右移动，例如，如果我在滑块上选择2022，我想检查单个单选按钮值2022，依此类推...试图将它们置于某些条件下，但真的不知道该怎么做。并具有与滑块相同宽度的无线电按钮。

import React from "react";
import { Radio, Slider } from "antd";

const App = () => {
  const [currentValueRadio, setcurrentValueRadio] = React.useState(1);
  const [currentValue, setCurrentValue] = React.useState();

  return (
    <>
      <Radio.Group
        onChange={(e) => {
          console.log("radio checked", e.target.value);
          setcurrentValueRadio(e.target.value);
        }}
        value={currentValueRadio}
      >
        <Radio value={1}>2021</Radio>
        <Radio value={2}>2022</Radio>
      </Radio.Group>
      <Slider
        defaultValue={2021}
        min={2021}
        max={2022}
        style={{ width: 240 }}
        onChange={(value) => {
          console.log(currentValue);
          setCurrentValue(value);
        }}
      />
    </>
  );
};

Answer 1

您需要将被控制为“值”支柱的状态添加到两个组件中，以使它们合并。

<Slider
  value={currentValueRadio} // <- add a value prop
  defaultValue={2021}
  ...

在您的示例中添加值支柱将使两个组件都对相同的状态值做出反应。
但是，由于无线电组件将值设置为1或2，并且滑块上的范围是2021年至2022年，因此您可能看不到所需的结果。也许将无线电值分别更改为2021和2022。