根據其他 Select 字段選擇螞蟻設計更新 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>

我正在嘗試根據公司選擇 onChange 選擇實現產品選擇中的選項元素更改。

我在 Select 中指定了 onChange 並調用了 this.handleSelectCompanyOnchange。 在其中我選擇了 companyId。

在 this.state.companyId 中，我手動設置了 companyId，我將刪除它。

我真的是螞蟻設計的新手，無法弄清楚一旦選擇了公司，如何更新產品列表。

在這里，用戶和產品是 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 設計表單並為此選擇。 我也確實提到了https://github.com/ant-design/ant-design/issues/4862以及如何在 antd 中獲取 FormItem 更改的字段值

Answer 1

這是實現它所需的條件。

1. 使用onValuesChange的道具的Form 。 這是在 antd Form字段更改時執行 setState 的最佳位置，而不是在Select或Input onChange 。

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

2. 一個表單實例（鈎子）。 這在您的情況下是可選的，但這對於設置和獲取表單值很有用。 在此處查看更多信息。

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

這是產品選項呈現的樣子， map和filter的組合，其中selectedCompanyId來自狀態。 請注意，如果列表的固定長度未知，請不要使用索引作為key ，反應會對此造成混淆，您會得到一些邏輯錯誤。 使用一些唯一的 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 中完整的工作代碼：