根据其他选择字段选择 ant 设计更新选择选项列表

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，我将删除它。

我对 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以及如何获取 antd 中 FormItem 的更改字段值

Answer 1

这是实现它所需要的。

1. 使用onValuesChange的道具Form。Form这是 antd字段更改时执行 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中完整的工作代码：