how to build antd select field with input number options

Question

I have been trying to create a dropdown or select field which in options has input number fields, and i would like to achieve same effect as on picture, so when i increase these fields i need a populated value in placeholder. I have tried with antd select field and drawer field but with no luck. How to do it?

Answer 1

You can check the following example, adult and child count buttons are shown in the <Dropdown/> component and the updated values are shown in the antd <Input/> component

Demo.js

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
import { Menu, Dropdown, Input, Form, Button } from 'antd';

const Demo = () => {
  const [form] = Form.useForm();

  const [adult, setadult] = useState(0);
  const [child, setchild] = useState(0);
  const [passcount, setpasscount] = useState('Adult (0), Child(0)');

  const menu = () => {
    return (
      <Menu>
        <Menu.Item>
          Adult
          <span style={{ float: 'right' }}>
            <PlusCircleOutlined onClick={addAdult} style={{ margin: '8px' }} />
            {adult}
            <MinusCircleOutlined
              onClick={removeAdult}
              style={{ margin: '8px' }}
            />
          </span>
        </Menu.Item>
        <Menu.Item>
          Child
          <span style={{ float: 'right' }}>
            <PlusCircleOutlined onClick={addChild} style={{ margin: '8px' }} />
            {child}
            <MinusCircleOutlined
              onClick={removeChild}
              style={{ margin: '8px' }}
            />
          </span>
        </Menu.Item>
      </Menu>
    );
  };

  useEffect(() => {
    setpasscount(`Adult (${adult}), Child(${child})`);
    form.setFieldsValue({
      people: `Adult (${adult}), Child(${child})`,
    });
  }, [adult, child]);

  const addAdult = () => {
    setadult((prevAdult) => prevAdult + 1);
  };

  const removeAdult = () => {
    if (adult > 0) setadult((prevAdult) => prevAdult - 1);
  };

  const addChild = () => {
    setchild((prevchild) => prevchild + 1);
  };

  const removeChild = () => {
    if (child > 0) setchild((prevchild) => prevchild - 1);
  };

  const onFinish = (values) => {
    console.log('Success:', values);
  };

  return (
    <>
      <Form
        form={form}
        name="passenger"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        onFinish={onFinish}
        initialValues={{
          people: passcount,
        }}
      >
        <Form.Item name="people">
          <Dropdown visible="true" overlay={menu}>
            <Input value={passcount} style={{ width: 200 }} disabled />
          </Dropdown>
        </Form.Item>

        <Form.Item style={{ marginTop: '110px' }}>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};

export default Demo;

Screenshots:

Edit: Display number of adult/child after submitting the form.