Radio Ant 设计时下拉重新加载

Question

import React, { useState } from "react";
import "./index.css";
import type { RadioChangeEvent } from "antd";
import { Input, Radio, Space, Select } from "antd";

const App: React.FC = () => {
  const [value, setValue] = useState(1);

  const onChange = (e: RadioChangeEvent) => {
    console.log("radio checked", e.target.value);
    setValue(e.target.value);
  };

  return (
    <Radio.Group onChange={onChange} value={value}>
      <Space direction="vertical">
        <Radio value={1}>Option A</Radio>
        <Radio value={2}>Option B</Radio>
        <Radio value={3}>Option C</Radio>
        <Radio value={4}>
          <Select
            defaultValue="lucy"
            style={{ width: 120 }}
            options={[
              { value: "jack", label: "Jack" },
              { value: "lucy", label: "Lucy" },
              { value: "Yiminghe", label: "yiminghe" },
              { value: "disabled", label: "Disabled", disabled: true },
            ]}
            onClick={(e) => e.stopPropagation()}
          />
        </Radio>
      </Space>
    </Radio.Group>
  );
};

export default App;

我在 Ant Design 的无线电组件中遇到下拉菜单问题。每当我尝试单击下拉列表将其展开时，无线电组件的状态就会触发重新渲染。这会导致下拉列表重新加载，从而使我无法在下拉列表的“选择”组件中选择任何值。怎么解决？

Answer 1

问题不在于 Ant 设计，而更多在于 React 的工作原理。通过将 Select 放置在单选中，每次单击单选打开 Select 组件时，都会触发 Radio.Group 的 onChange，从而更改组件的状态，从而重新渲染组件。只需从 Select 组件中删除 Radio 包装器并将其替换为自定义触发器即可。