React ant design 表單form自定義表單控件Demo

• 使用

          <Form.Item
            label="名稱"
            name="name"
            rules={rulesConfig}
          >
            <ListAutoComplete />
          </Form.Item>

• 組件詳情

import React, {useState} from 'react';
import {Input, AutoComplete} from 'antd';

const mockVal = (str: string, repeat: number = 1) => {
  return {
    value: str.repeat(repeat),
  };
};

interface AutoCompleteProps {
  value?: string;
  onChange?: (value: { inputVal: string }) => void;

}

const ListAutoComplete: React.FC<AutoCompleteProps> = ({value, onChange}) => {
  const [inputVal, setInputValue] = useState('');
  const [options, setOptions] = useState<{ value: string }[]>([]);
  const onSearch = (searchText: string) => {
    setOptions(
      !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)],
    );
  };
  const onSelect = (data: string) => {
    if (onChange) {
      onChange({inputVal,});
    }
  };
  const handleChange = (data: string) => {
    setInputValue(data);
  };

  return (
    <AutoComplete
      value={inputVal}
      options={options}
      onSelect={onSelect}
      onSearch={onSearch}
      onChange={handleChange}
    >
      <Input.Search size="large" placeholder="input here" enterButton/>
    </AutoComplete>
  );
};

export default ListAutoComplete;

• 提交數據獲取得到數據name對象