react antd封装的select 三级联动清空 上级改变 下级清空

Question

封装的search的select部分

getFieldItem (configItem) {
const { getFieldDecorator } = this.props.form
switch (configItem.type) {
case 'select': {
return (

        {
          getFieldDecorator(configItem.value, { rules: [], initialValue: configItem.defaultValue ? configItem.defaultValue : configItem.defaultValue })(
            <Select
              placeholder={configItem.placeholder} onChange={configItem.onChange}
              style={{ width: configItem.width || 120 }}>
              {
                (configItem.options || []).map(item =>
                  <Option key={item.value} value={item.value}>{item.label}</Option>
                )
              }
            </Select>
          )
        }
      </Form.Item>
    )
  }

页面引用封装的函数做三级联动

        this.formConfigs = [
  { value: 'palces', onChange: (e, val) => this.onchages(e, val), width: 200, placeholder: '现居住场所', type: 'select', options: [] },
  { value: 'placeTaypsaeName', onChange: (e, val) => this.onchageBuilding(e, val), width: 200, placeholder: '选择楼号', type: 'select', options: [] },
  { value: 'nationCode', onChange: (e, val) => this.onchageUnit(e, val), placeholder: '选择单元', type: 'select', options: [] },
  { value: 'carColors', width: 145, placeholder: '选择房间', type: 'select', options: [] } // { value: 'carType', placeholder: '现居住地', type: 'select', options: carTypeOptions },
]

** 其中的一个 onchange事件**

 onchages (e, val) {
let transformArray = []
httpClient.post('地址', { BelongedPlace: e })
  .then(result => {
    let data = result.data || []
    data.forEach((data) => {
      transformArray.push({ label: data['name'], value: data['name'], class: 'BelongedPlace' })
    })
    this.setState({
      list1: transformArray
    })
  })

}

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

要实现React Ant Design中的一级和二级选择器的清空功能，您可以在onChange事件中添加逻辑来处理。以下是一个基本示例：

首先，在组件内部定义一个状态变量（例如：selectedValues），用于存储当前选中的值。

然后，在onChange事件处理器中检查是否有值被更改，并在必要时清除所有选中的值。

下面是修改后的onChange方法的示例：

import React from "react";
import { Form } from "antd";

const formLayout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};

export default function MyComponent() {
  const [selectedValues, setSelectedValues] = React.useState([]);

  const handleChange = (values) => {
    if (!values.length) {
      setSelectedValues([]);
    } else {
      setSelectedValues(values);
    }
  };

  return (
    <Form layout="vertical" onSubmit={(e) => e.preventDefault()}>
      <Form.Item {...formLayout}>
        <input type="text" />
      </Form.Item>

      <Form.Item {...formLayout}>
        <div>Change Me</div>
      </Form.Item>

      <Form.Item {...formLayout}>
        <button onClick={() => handleChange([])}>Clear Values</button>
      </Form.Item>
    </Form>
  );
}

在这个例子中，我们使用了handleChange函数来监听用户的输入变化。如果用户没有输入任何值，则会清除selectedValues数组，以避免不必要的数据交换。这将确保只有当用户至少选择了某些值时，才会更新selectedValues数组。

请注意，这个解决方案可能不适用于所有的场景，因为handleChange函数可能会在不同的地方调用。因此，您可能需要根据您的具体需求进行调整。