如何使用输入数字选项构建 antd select 字段

Question

我一直在尝试创建一个下拉菜单或 select 字段，在选项中有输入数字字段，我想达到与图片相同的效果，所以当我增加这些字段时，我需要填充占位符中的值。我尝试过使用 antd select 字段和抽屉字段，但没有成功。怎么做？

Answer 1

您可以查看以下示例，<Dropdown/>组件中显示了成人和儿童计数按钮，并且更新后的值显示在antd <Input/>组件中

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;

截图：

编辑：提交表单后显示adult/child个

如何使用输入数字选项构建 antd select 字段

how to build antd select field with input number options

reactjs

antd