React with Ant Design - 如何在 <Form> 上的多个 <Select> 之间共享状态？

Question

我是 ReactJS 和 AntDesign 的新手。

我正在尝试获取一组 <Select> 组件来共享状态，因此当您 select 第一个组件时，它会填充表单中下一个组件的选项，它必须是 <Select>，我不能使用 <Cascade>，因为它会使 UI 复杂化太多（用户不是很精通计算机）。

这是我正在尝试实现的示例，useEffect 上的数据将在单个请求中来自后端

https://stackblitz.com/edit/react-xarwcj-sghpze?file=index.js

在你 select 第一个选项之后，我希望第二个下拉列表会填充子数组，但我得到的是一个空的下拉列表。

我很确定该值已设置，但 React 或 Ant 没有重新渲染它，因为我的配置有误，但我不明白为什么。

Answer 1

如果你使用 antd Form 那么你必须将你的输入元素包装在 Form.Item 组件中。 Form.Item 组件有一个 name 属性。当您使用任何 formInstance 方法时，您提供给 Form.Item 的 name 就是您可以引用给定输入组件的方式。所以当你做 formInstance.setFieldsValue({ subList: value.list }); 你实际上没有 subList 表单项，所以我认为这就是为什么 antd 没有设置它的值。

话虽如此，您的第二个 select 应该看起来像这样：

<Form.Item name="subList">
  <Select ... >
    {formInstance.getFieldValue("subList")?.map ... }
  </Select>
</Form.Item>

不要忘记将第一个 Select 和 Form 中的任何其他输入组件也包装起来。您给 Form.Item 的名称是您将能够读取 Form 的 onFinish 方法中的值的方式。

有关此类用法的工作示例，您可以从 antd 表单文档中查看此示例：https://codesandbox.io/s/n1zdn.

我应该提一下，对我来说，当你在第一个 Select 的 onChange 中做 formInstance.setFieldsValue({ subList: value.list }); 时似乎是错误的（因为 value 是一个数字，所以 value.list 未定义），但我相信那是因为您提供的只是实际代码的粗略、不完整的副本。但是，如果您对此问题还有其他困难，请发表评论，我会尽力提供更多帮助！

编辑

为了回答您的评论，我设法确定的问题是，当 select 从第一个 select 中选择一个选项时，您正在设置值的第二个 select 作为数组。您真正想要做的是设置第二个 select 的可用选项，而不是它的值。

所以我建议的更改是让您在状态变量中设置第二个 select 的选项，如下所示：

const [list, setList] = useState([]);
const [secondList, setSecondList] = useState([]);

// ...

return (
    <>
      <Form form={formInstance}>
        <Form.Item>
          <Select
            style={{ width: 120 }}
            onSelect={value => {
              console.log(list.find(o => o.id === value).list);
              setSecondList(list.find(o => o.id === value).list);
            }}
          >
            {list.map(value => {
              return (
                <Option key={value.id} value={value.id}>
                  {value.name}
                </Option>
              );
            })}
          </Select>
        </Form.Item>

        <br />
        <br />

        <Form.Item name="subList">
          <Select
            style={{ width: 120 }}
            onChange={value => {
              console.log(value);
            }}
          >
            {secondList?.map(value => {
              return (
                <Option key={value.id} value={value.id}>
                  {value.desc}
                </Option>
              );
            })}
          </Select>
        </Form.Item>
      </Form>
    </>
  );

React with Ant Design - 如何在 <Form> 上的多个 <Select> 之间共享状态？

React with Ant Design - How to share state between multiple <Select> on a <Form>?

javascript

reactjs

jsx

antd

ant-design-pro

编辑