根据其他Select field selection 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 选择来实现 Options in Products Select 元素的更改。

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

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

我对 ant 设计真的很陌生，一旦选择了公司，我就无法弄清楚如何更新产品列表。

这里，用户和产品是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和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. 一个表单实例（钩子）。在您的情况下这是可选的，但这对于设置和获取表单值很有用。查看更多关于它的here。

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

这是产品选项渲染的样子，map 和 filter 的组合，其中 selectedCompanyId 来自状态。请注意，如果列表的固定长度未知，请不要将索引用作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 中完整的工作代码：