以下功能根据 掘金小册学习写的demo
需要实现的组件
<Form>
<FormItem>
<Input>
需要实现的功能
表单提交submit方法
ref获取form实例
form管理input的值
知识点:
props的使用
操作props.children的使用,显式注入prop属性,使用React.cloneElement
表单嵌套的原理
React.Children.forEach的用法
用法:
import React from 'react'
import {
Form, FormItem, Input } from './MyForm/index.js';
export default function SubmitForm() {
const form = React.useRef(null)
const submit = () => {
/* 表单提交 */
form.current.submitForm((formValue) => {
console.log(formValue)
})
}
const reset = () => {
/* 表单重置 */
form.current.resetForm()
}
return <div className='box' >
<Form ref={
form}>