Tengo un componente de elemento de formulario personalizado y quiero agregar una entrada oculta, pero no puedo actualizar el valor sin el objeto Ant Form (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> </> );Puede eliminar la parte de entrada por completo en lugar de mantenerla oculta para usar su valor. Prueba esto:
<Select onChange={value => setTermType(value)}}> <Select.Option value="date">Date</Select.Option> <Select.Option value="number">Number</Select.Option> </Select> Luego puede usar termType como estado, y se actualizará a medida que cambie el valor de Select . Le sugiero que agregue un marcador de posición o un valor inicial predeterminado a Select componente como
<Select defaultValue="date" onChange={value => setTermType(value)}}> <Select.Option value="date">Date</Select.Option> <Select.Option value="number">Number</Select.Option> </Select>Puede usar useState hook y establecer el valor en el state y no usar Form.useForm() y Form.Item en absoluto:
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} />