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

Question

我是 ReactJS 和 AntDesign 的新手。

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

这是我想要实现的示例，useEffect 上的数据将来自后端的单个请求

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

选择第一个选项后，我预计第二个下拉列表将被子数组填充，但我得到一个空下拉列表。

我很确定该值正在设置，但由于我的一些错误配置，React 或 Ant 没有重新渲染它，但我不明白为什么。

Answer 1

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

话虽如此，您的第二个选择应该如下所示：

<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 是未定义的），但我相信这是因为您提供的只是您实际代码的粗略、不完整的副本。但是，如果您对此问题有进一步的困难，请发表评论，我会尽我所能提供更多帮助！

编辑

为了回答您的评论，我设法确定的问题是，当从第一个选择中选择一个选项时，您将第二个选择的 value 设置为 array强>。你真正想做的是设置第二个选择的可用选项，而不是它的值。

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

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