如何使用输入号选项构建ANTD选择字段

Question

我一直在尝试创建一个下拉列表或选择选项中具有输入数字字段的字段，并且我想达到与图片相同的效果，因此，当我增加这些字段时，我需要占位符中的填充值。我已经尝试了ANTD选择场和抽屉字段，但没有运气。怎么做？

Answer 1

您可以检查以下示例，成人和儿童计数按钮显示在 组件中，更新的值显示在 antd 组件

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;

截图：

编辑：
提交表格后显示成人/儿童人数。