如何在 Ant.Design 中設置沒有表單 object 的 Form.Item 的值？

Question

我有自定義表單項組件，我想添加隱藏輸入，但沒有 Ant 表單我無法更新值 object (Form.useForm();

const selectBefore = (
   <Select
       onChange={value => {/*HOW TO SET NEW VALUE FOR <Input name='term-type'/> ?*/}}
    >
         <Select.Option value="date">Date</Select.Option>
         <Select.Option value="number">Number</Select.Option>
</Select>
);

const InputType = termType === 'date' ? DateInput : Input;

return (
        <>
            <InputType
                addonBefore={selectBefore}
                {...rest}
            />

            <Form.Item
                name='term-type'
                initialValue={termType}
                style={{display: 'none'}}
            >
                <Input
                    type="text"
                    value={termType}
                />
            </Form.Item>
        </>
    );

Answer 1

您可以完全刪除 Input 部分，而不是將其隱藏以使用其值。 嘗試這個：

<Select onChange={value => setTermType(value)}}>
     <Select.Option value="date">Date</Select.Option>
     <Select.Option value="number">Number</Select.Option>
</Select>

然后你可以使用termType作為 state，它會隨着Select值的變化而更新。 我建議您應該向Select組件添加一個占位符或默認初始值作為

<Select defaultValue="date" onChange={value => setTermType(value)}}>
     <Select.Option value="date">Date</Select.Option>
     <Select.Option value="number">Number</Select.Option>
</Select>

Answer 2

您可以使用useState掛鈎並將值設置為state並且根本不使用Form.useForm()和Form.Item ：

const [ termType, setTermType ] = useState("");

...

<Select onChange={value => setTermType(value)}}>
     <Select.Option value="date">Date</Select.Option>
     <Select.Option value="number">Number</Select.Option>
</Select>

...

<Input
    type="text"
    value={termType}
/>