Antd 输入值属性未定义

Question

我有带输入字段的 Antd 下拉组件。当我按下 + 和 - 按钮时，它会填充输入字段中的值，但是当我单击提交时，我得到未定义的值。我试过嵌套 Form.Item 一层，但它又是未定义的。

我的组件看起来像这样

const PeopleNumber = () => {
    const [adult, setAdult] = useState(0);
    const [child, setChild] = useState(0);
    const [passcount, setPasscount] = useState('Adult (0), Child(0)');

    const menu = () => {
        return (
            <>
                <div className="adult-child-drawer">

                    <div className="adult-child-button">
                        Adult
                        <span style={{float: 'right'}}>
                         <PlusCircleOutlined onClick={addAdult} style={{margin: '8px'}}/>
                            {adult}
                            <MinusCircleOutlined onClick={removeAdult} style={{margin: '8px'}}/>
                        </span>
                    </div>
                    <div className="adult-child-button">
                        Child
                        <span style={{float: 'right'}}>
                        <PlusCircleOutlined onClick={addChild} style={{margin: '8px'}}/>
                            {child}
                            <MinusCircleOutlined onClick={removeChild} style={{margin: '8px'}}/>
                        </span>
                    </div>
                </div>

            </>

        );
    };

    useEffect(() => {
        setPasscount(`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);
    };

    return (
        <>
            <div className="people-form">
                <Form.Item name='people'>
                    <Dropdown overlay={menu} trigger={['click']}>
                        <Input value={(adult || child > 0)?passcount:''}  placeholder={passcount} style={ (adult || child !== 0)?{color:'#5A5B5B'}: {color:'#B3B4B5'}} bordered={false}/>
                    </Dropdown>
                </Form.Item>
            </div>
        </>
    );
};

export default PeopleNumber;

PeopleNumber 组件添加到提交的父组件。提交后，我得到除 PeopleNumber.Please 帮助之外的所有其他组件的值。

const onFinish = (value) => {
        console.log('values are:', value)
    }
 <Form onFinish={onFinish} form={form}>

      <From/>
      <To/>
      <Date/>               
      <PeopleNumber/>
      <Button htmlType='submit
           Search
      </Button>
<Form/>

Answer 1

完整代码 变化：使用表单在 useEffect 中设置 people 值需要将表格从 Parent Component 传递到 People Number Component

import { useEffect, useState } from 'react';
import { Button, Dropdown, Form, Input } from 'antd';
import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';

const PeopleNumber = (props) => {
    const { form } = props;
    const [adult, setAdult] = useState(0);
    const [child, setChild] = useState(0);
    const [passcount, setPasscount] = useState('Adult (0), Child(0)');

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

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

    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);
    };

    return (
        <>
            <div className='people-form'>
                <Form.Item name='people'>
                    <Dropdown overlay={menu} trigger={['click']}>
                        <Input
                            value={adult || child > 0 ? passcount : ''}
                            placeholder={passcount}
                            style={adult || child !== 0 ? { color: '#5A5B5B' } : { color: '#B3B4B5' }}
                            bordered={false}
                        />
                    </Dropdown>
                </Form.Item>
            </div>
        </>
    );
};

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

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

    return (
        <Form form={form} onFinish={onFinish}>
            <PeopleNumber form={form} />
            <Button htmlType='submit' type='primary'>
                Submit
            </Button>
        </Form>
    );
};

export default App;

解法： 如果你想要在输入中显示的相同值作为占位符，你可以用下面的代码替换你的useEffect

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

TLDR:

<Form.Item name='people'>
   <Dropdown overlay={menu} trigger={['click']}>
     <Input value={(adult || child > 0)?passcount:''}  placeholder={passcount} style={ (adult || child !== 0)?{color:'#5A5B5B'}: {color:'#B3B4B5'}} bordered={false}/>
   </Dropdown>
</Form.Item>

如果您尝试在输入字段中键入，它将无法工作，因为需要一个直接的字段才能正常工作。你变得不确定只是因为你用下拉框和 .

包装了输入字段

但是如果你用下拉菜单包裹，现在你可以在输入字段中输入。

现在您的问题是，如果您正在设置输入字段的值，为什么即使您将下拉列表移到之外，提交表单后它也没有显示？

答案： 因为你使用的是 antd 表单挂钩，它会自动控制包装在中的输入字段。由于您只是传递值但没有使用 form.setFieldsValue({people: someValue }) 设置值。这就是为什么当您提交表单时它没有显示的原因。

Antd 输入值属性未定义

Antd input value property undefined

reactjs

antd

Antd 输入值 属性 未定义

Antd input value property undefined

reactjs

antd

Antd 输入值属性未定义