web

antd-combobox

1. combobox

  • 使用antd时，需要一个combobox场景。即选择框也可输入自定义内容。
  • 但是antd貌似没有这个组件，可以用AutoComplete组件来实现。

2. 实现要点

  • 1
    2
    3
    4
    5
    6
    7
    8
    <AutoComplete
      value={payment_terms}
      style={{ width: 100 }}
      onChange={(value) => {
        this.changePaymentTerm(`${this.validatePaymentTerms(value)}`);
      }}
      dataSource={paymentTermsList.map((item) => `${item}`)}
    ></AutoComplete>
  • 提前设置好dataSource，即可选择的列表。
  • 因为AutoComplete就是可以输入来搜索的，所以就实现了既可以输入，也可以搜索的功能。
  • 注意点：控制onChange，既可以实现输入内容校验和替换，也是设置了当输入自定义内容时，即为下拉选择无可选项。直接设置值即可。
1
2
3
4
5
6
7
8
9
10
// 强制处理为数字
validatePaymentTerms = (value) => {
  if (Number.isNaN(Number(value))) {
    return 0;
  }
  if (value < 0) {
    return Math.abs(value);
  }
  return Math.round(value);
};