javascript - 基于其他Select字段选择ant design更新Select Option列表

Question

<Form
    layout="vertical"
    size="medium"
    className="test-form"
    requiredMark={false}
    onFinish={onFinish}
 >
             <Form.Item
                  name="companyId"
                  label="Company/Customer"
                  rules={[{ required: true, message: "Please select Company!"}]}  
              >
                  <Select
                    onChange={this.handleSelectCompanyOnchange}
                    style={{ width: "50%" }}
                    name="companyId"
                  >
                    {users.map((user, index) => {
                      return (
                        <Option key={index} value={user.companyID}>
                          {user.companyName}
                        </Option>
                      );
                    })}
                  </Select>
                </Form.Item>
            
       <Form.Item
             label="Products"
             name="products"
             rules={[{ required: true, message: "Please select Products!"}]}
        >

            <Select mode="multiple" allowClear style={{ width: "70%" }}>
                    {products.map((product, index) => {
                      if (this.state.companyId == product.companyId) {
                        return (
                          <Option key={index} value={product.id}>
                            {product.productName}
                          </Option>
                        );
                      }
                    })}
             </Select>
           </Form.Item>
      </Form>

我正在尝试根据 Company Select onChange 选择实现 Products Select 元素中的 Options 更改。

我在Select中指定了onChange并调用this.handleSelectCompanyOnchange。我在其中选择了 companyId。

在 this.state.companyId 中，我手动设置了 companyId，我将删除它。

我真的是 ant design 的新手，不知道如何在选择公司后更新产品列表。

这里，用户和产品是json如下。

users: 

[{
companyID: 2
companyName: "TEST1"
},{
companyID: 7
companyName: "TEST2"
}]

products:

[{
companyId: 2
id: 1
productName: "TESTProduct1"
},{
companyId: 7
productName: "TESTProduct2"
id: 2
},{
companyId: 7
id: 3
productName: "TESTProduct3"
},{
companyId: 7
id: 4
productName: "TESTProduct4"
}]

但是，我尝试了 getValueFromEvent 但无法实现。我为此使用 Ant design Form 和 Select。我也提到了 https://github.com/ant-design/ant-design/issues/4862和 how to get field value on change for FormItem in antd

Answer 1

这是实现它所需的条件。

1. 使用 Form 的 onValuesChange 属性。这是在antd Form 字段变化时执行setState 的最佳位置，而不是在Select 或Input onChange.

    <Form onValuesChange={handleFormValuesChange}>
        ...
    </Form>
   

2. 一个表单实例(钩子(Hook))。这在您的情况下是可选的，但这对于设置和获取表单值很有用。查看更多here关于它。

    const [form] = Form.useForm();
   
    <Form form={form} onValuesChange={handleFormValuesChange}>
        ...
    </Form>
   

这是产品选项呈现的样子，map 和 filter 的组合，其中 selectedCompanyId 来自 state。请注意，如果列表的固定长度未知，请不要将索引用作 key，否则 react 会对此感到困惑，并且您会得到一些逻辑错误。使用一些唯一的 ID。

<Form.Item label="Products" name="product">
  <Select>
    {products
      .filter((product) => product.companyId === selectedCompanyId)
      .map((product) => (
        <Option key={product.id} value={product.id}>
          {product.productName}
        </Option>
      ))}
  </Select>
</Form.Item>

这里是handleFormValuesChange

const handleFormValuesChange = (changedValues) => {
  const formFieldName = Object.keys(changedValues)[0];
  if (formFieldName === "company") {
    setSelectedCompanyId(changedValues[formFieldName]);  // perform setState here
    form.setFieldsValue({product: undefined}) //reset product selection
  }
};

这是 React Hooks 中完整的工作代码: