@freemen/antd-form
antd3 form表单改造
参数
-
onFinish
保存数据 函数 -
initialValue
表单初始值 - 其他参数参照 [https://3x.ant.design/components/form-cn/#Form]
案例
/*
* @Description: antd3 form表单改造
* @FilePath: /antd3/src/Form/App.js
*/
import React, { useRef, useEffect } from "react"
import { Input, Icon, Button } from "antd"
import Form from "./index"
const ComInput = React.forwardRef((props, ref) => {
// console.log("ComInput", props)
return <Input {...props} />
})
const App = () => {
let formRef = useRef()
const onValuesChange = (value, allValues) => {
// console.log("onValuesChange", value, allValues)
}
const onFinish = (value) => {
console.log("onFinsh", value)
}
const onFieldsChange = (fields, allFields) => {
// console.log("onFieldsChange", fields, allFields)
}
useEffect(() => {
// console.log(formRef)
}, [])
return <Form
ref={formRef}
onFinish={onFinish}
onFieldsChange={onFieldsChange}
onValuesChange={onValuesChange}
initialValue={{
username: "张三",
name1: "1",
name12: 1,
password: "12132132"
}}
>
<Form.Item
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
>
<Input
prefix={<Icon
type="user"
style={{ color: 'rgba(0,0,0,.25)' }}
/>}
placeholder="Username" />
</Form.Item>
<Form.Item
name="password"
rules={[{ required: true, message: 'Please input your Password!' }]}
>
<Input
prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
type="password"
placeholder="Password"
/>
</Form.Item>
<Form.Item name="name1">
{(...vale) => {
// console.log(vale)
return <ComInput />
}}
</Form.Item>
<Form.Item name="name12">
{((...vale) => {
// console.log(vale)
return <div>1</div>
})()}
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" >
Log in
</Button>
</Form.Item>
</Form>
}
export default App