admin/src/pages/package/DishList.jsx

import React, { useState } from 'react';
import { List, Popconfirm, Select } from 'antd';

const { Option } = Select;

const Header = props => {
  const { onChange } = props;
  const [data, setData] = useState([]);
  const [value, setValue] = useState();

  const handleSearch = (newValue) => {
    if (newValue) {
      // fetch(newValue, setData);
    } else {
      setData([]);
    }
  };

  const handleChange = (newValue) => {
    setValue(newValue);
    if (newValue) {
      onChange(data.filter(x => x.id === newValue)[0]);
    }
  };

  const options = data.map(d => <Option key={d.id} value={d.id}>{d.name}</Option>);

  return (
    <Select
      style={{ width: '100%' }}
      showSearch
      value={value}
      placeholder='请选择菜肴'
      defaultActiveFirstOption={false}
      showArrow={false}
      filterOption={false}
      onSearch={handleSearch}
      onChange={handleChange}
      notFoundContent={null}
    >
      {options}
    </Select>
  );
}


export default (props) => {
  const [list, setList] = useState([]);

  const onAdd = item => {
    const origin = list.filter(x => x.id !== item.id)[0];
    if (!origin) {
      setList([...list, item]);
    }
  }

  return (
    <List
      header={<Header onChange={onAdd} />}
      bordered
      dataSource={list}
      renderItem={item => (
        <List.Item
          className={classNames({ active: current.id === item.id })}
          onClick={() => setCurrent(item)}
          actions={[
            <Popconfirm
              key="delete"
              title="确认删除套餐?"
              onConfirm={() => onDelete(item)}
              >
              <a href="#">删除</a>
            </Popconfirm>
          ]}
        >
          {item.name}
        </List.Item>
      )}
    />
  );
}