[JavaScript知识库]62 react改变antd中Form的值

React 改变 antd 中 Form 的值

react 中使用 Form 时不能直接改变表单中的值，需要使用 useForm 来获取和改变表单的值。

Form 组件中有 Form.useForm 可以直接使用。

Form 中的 Form.Item 必须有 name 属性。

import React, { useState } from 'react'
import { Form, Input } from 'antd'
import 'antd/dist/antd.css'

const App = () => {
    // 定义 value 状态
    const [value, setValue] = useState('')
    // 使用 useForm
    const [form] = Form.useForm()
    // 点击回车时触发
    const handleFinish = () => {
        // 使用 useForm 获取 name 属性值为 input 的 Form.Item 的值
        setValue(form.getFieldValue('input'))
        // 使用 useForm 将 name 属性值为 input 的 Form.Item 的值设置为空字符串
        form.setFieldValue({
            input: ''
        })
    }
    return (
        <Form form={form}>
        	<Form.Item name='input' onFinish={handleFinish} >
            	<Input />
            </Form.Item>
        </Form>
    )
}

export default App