antd中的input和select常用属性整理

• 表单中input和select是使用频率最高的两个输入控件
• 其他属性等待后续编辑添加

一、Input

1.1 Input基础

const addonBeforeNode = (
  <Form.Item name="addonBefore_select" noStyle>
    <Select style={{ width: 120 }}>
      <Select.Option value="http">http://</Select.Option>
      <Select.Option value="https">https://</Select.Option>
    </Select>
  </Form.Item>
);

<Input
  autoComplete="off" // 阻止浏览器记住和回显之前输入的内容
  placeholder="placeholder" // 输入区域为空时展示的文案
  addonBefore={addonBeforeNode} // 控件前置插件，在输入框内容区以外
  addonAfter="addonAfter" // 控件后置插件，在输入框内容区以外
  prefix={ // 前置图标，在输入框内容区以内
    <AudioOutlined style={{ fontSize: 16, color: "#1890ff" }} />
  }
  suffix={<UserOutlined />} // 后置图标，在输入框内容区以内
  showCount // 展示输入字符串的长度
  allowClear // 显示清除按钮
/>

1.2 Search

方便展示搜索交互

const onSearch = (value) => {
  console.log("onSearch", value);
};
<Input.Search
  placeholder="input search text" 
  enterButton // 不写的话，内容区域右侧默认有一个放大镜图标；写了属性会让这个小区域变成Button
  onSearch={onSearch} // 点击放大镜图标或者enterButton回调
  loading={true} // loading效果图标，会覆盖放大镜
/>

1.3 TextArea

<Input.TextArea
  placeholder="input TextArea text" //
  rows={4} // 行数；优先级低于 autoSize，会被覆盖
  autoSize={{
    minRows: 2, // 最小行数
    maxRows: 6, // 最大行数
  }}
  maxLength={30} // 字符串长度
  showCount // 显示字数统计 count/maxLength
/>

1.4 Group

提供Input融合效果，让控件之间更像是一个整体

<Form.Item label="Input.Group">
  <Input.Group compact={true}>
    <Form.Item name="Group_Input" noStyle>
      <Input style={{ width: "20%" }} />
    </Form.Item>
    <Input style={{ width: "30%" }} />
  </Input.Group>
</Form.Item>

二、Select

• 选项展示值优先options数据
• 没有options属性，默认展示Select.Option的children，没有children，展示Select.Option的label属性，最后Select.Option的value属性兜底，如果都没有指定，展示空；onChange回调的到value为null

1、Select基础单选和多选

const options = [
   { value: "31",label: "label three1" },
   { value: "3", label: "label three" },
   { value: "4", label: "label four" },
];

const onChange = (value) => {
	// value默认是string；当增加了属性labelInValue，会返回option对象
  console.log(`selected}`, value);
};

<Form.Item
  name="Select"
  label="Select"
  rules={[{ required: true, message: "Please Select!" }]}
>
	// options优先级更高，会覆盖Select.Option
  <Select options={options} labelInValue onChange={onChange}> 
    <Select.Option value="1">label1</Select.Option>
    <Select.Option value="2">label2</Select.Option>
  </Select>
</Form.Item>
<Form.Item name="Select_multiple" label="Select_multiple">
	// optionLabelProp表示选中以后展示的值：children | value | label
  <Select mode="multiple" optionLabelProp="label">
  	 // label属性，默认展示；会被children元素覆盖
    <Select.Option value="1" label="label: label1">
      <p>label1 option</p> // Option 的 children元素
    </Select.Option>
    <Select.Option value="2" label="label: label2">
      <p>label2 option</p>
    </Select.Option>
  </Select>
</Form.Item>

2、Select输入搜索

• optionFilterProp可以快速设置filter模式
• filterOption设置自定义复杂filter模式
• filterSort对filter之后的选项再排序

<Select
  options={options}
  showSearch // 开启输入筛选
  // optionFilterProp 表示根据option的那个属性来筛选：children | value（默认） | label
  optionFilterProp="label"
  // filterOption 自定义搜索函数，会覆盖optionFilterProp属性；
  // 下面filterOption案例是同时匹配label和value，并切不区分大小写
  filterOption={(input, option) =>
    (option?.label ?? "")
      .toLowerCase()
      .includes(input.toLowerCase()) ||
    (option?.value ?? "").toLowerCase().includes(input.toLowerCase())
  }
  // filterSort 自定义排序函数，在filterOption基础上，可以对选项进行排序；
  // 应该也可以对options进行排序
  filterSort={(optionA, optionB) =>
    // localeCompare 按字母顺序排序, 返回-1 0 1；a.localeCompare(b) === -1 则表示a在b前面
    (optionA?.label ?? "")
      .toLowerCase()
      .localeCompare((optionB?.label ?? "").toLowerCase())
  }
  onSearch={onSearch} // 注意当失去焦点，输入内容被置空的时候也会触发一次
  //  onChange 当值改变时触发；
  // 值不变就不会触发（value和option没有匹配上, 比如fieldNames指定value为其他值）
  onChange={onChange}
  onSelect={onSelect} // onSelect 当值改变时触发；晚于onChange
>
</Select>

3、分组和自定义渲染

• 下拉选项分组
• 下拉content自定义，会覆盖原有content

const optionsGroup = [
  {
    label: "Group one",
    options: [
      { value: "one1", label: "label one" },
      { value: "one2", label: "label second" },
    ],
  },
  {
    label: "Group second",
    options: [
      { value: "second1", label: "label one" },
      { value: "second2", label: "label second" },
    ],
  },
];
<Select
  options={optionsGroup}
  // 当options数据是其他杂乱格式，指定其中的key，可以完成数据对应
  fieldNames={{ label: "label", value: "value", options: "options" }}
  // dropdownRender 自定义下拉菜单渲染, 会覆盖原来的下拉菜单；
  // menu是原来的下拉选项的元素节点
  dropdownRender={(menu) => (
    <>
      {menu}
      {/* 增加自定义内容 menu节点 可以随意放置位置 */}
      <Divider
        style={{
          margin: "8px 0",
        }}
      />
      <Space
        style={{
          padding: "0 8px 4px",
        }}
      >
        <Input placeholder="Please enter item" />
        <Button type="text" icon={<PlusOutlined />}>
          Add
        </Button>
      </Space>
    </>
  )}
></Select>