@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