ant-design为input设置默认值,form失效

时间:2024-10-09 07:38:08

1.常规input

    const [inputValue, setInputValue] = useState("111");
    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setInputValue(e.target.value)
    };

    //使用
    <Input onChange={handleInputChange} value={inputValue}></Input>

效果

2.第一种方式在Form,Form.Item中会失效

 (一) 在Form.Item上设置

   <Form.Item label="ID" name="ID" initialValue={"111"}>
                <Input></Input>
   </Form.Item>

(二)在Form上设置

<Form initialValues={{id:"222"}}>
     <Form.Item label="ID" name="id">
           <Input></Input>
     </Form.Item>
 </Form>

(三) 使用hook

    const [form] = Form.useForm();
    form.setFieldsValue({
        id:"9999"
    })
    
    //使用
    <Form form={form}>
        <Form.Item label="ID" name="id">
             <Input></Input>
        </Form.Item>
    </Form>

效果

参考