React with Ant Design - 如何在 <Form> 上的多个 <Select>

Question

我是 ReactJS 和 AntDesign 的新手。我正在尝试获取一组组件<Select>来共享状态，因此当您选择第一个组件时，它会填充表单上下一个组件的选项，它必须是 a <Select>，我不能使用 a<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方法时，您可以引用给定的输入组件。所以当你这样做时，你实际上并没有表单项，所以我认为这就是 antd 没有设置它的值的原因。nameForm.ItemformInstance.setFieldsValue({ subList: value.list });subList

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

<Form.Item name="subList">

  <Select ... >

    {formInstance.getFieldValue("subList")?.map ... }

  </Select>

</Form.Item>

不要忘记首先包装它Select，以及您的任何其他输入组件Form。您赋予 的名称Form.Item是您能够读取Form的onFinish方法中的值的方式。

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

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

编辑

为了回答您的评论，我设法确定的问题是，当从第一个选择中选择一个选项时，您将第二个选择的值设置为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>

    </>

  );