目录

为什么 Form 组件中的表单控件不用 value 和 onChange 也能受控?

大家好,我是麦当。

我们写 React 的时候,一般想要让 input 元素受控,都需要为其添加 valueonChange 这两个属性,如下:

html 复制代码
  <input value={val} onChange={(e) => setVal(e.target.value)} />

但是用过 Antd 4、5 的人一定知道,Form 表单中的 FormItem,只要添加了 name 属性,便可以自动控制表单控件。本文就来聊聊 Form 组件是如何实现使表单元素自动受控的。

jsx 复制代码
<Form  
    initialValues={{ book: '玩转 React Hooks' }}  
    onFinish={(data: any) => {  
        console.log(data)  
    }}   
>  
    <Form.Item label="title" name="title">  
        <Input placeholder="please enter title"/>  
    </Form.Item>  
    <Form.Item>  
        <Button type="primary" htmlType="submit">  
            Submit
        </Button>  
    </Form.Item>  
</Form>  
  

原理

FormItem 里用到了 React.cloneElement 这个 api, FormItem 在渲染 children 前,会对 children 进行一次克隆,然后新增了 value 和 onChange 这两个 props 作为 children 的参数,这样就实现了表单控件的受控。然后在其他地方对数据进行统一管理。

代码

源码部分可以在这里查看,核心是 cloneElement 那一部分。

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
万少几秒前
JSON-Server 极速入门教程
前端
确实菜,真的爱8 分钟前
用css画一条弧线
前端·css
bingbingyihao26 分钟前
vue拓扑图组件
前端·javascript·vue.js
广龙宇28 分钟前
【Web API系列】XMLHttpRequest API和Fetch API深入理解与应用指南
前端
cjxIt29 分钟前
element-ui 中的 select 组件如何 remote-method 函数中传参
javascript·vue.js·ui
BillKu1 小时前
Vue3 + TypeScript 的 Hooks 实用示例
前端·vue.js·typescript
植物系青年1 小时前
前端玩数据库 👏 MongoDB/Mongoose 入门指南(下)
前端·mongodb·mongoose
程序饲养员1 小时前
React从前的SPA(CSR)到现在的SSR和SSG原理解析
前端·javascript·前端框架
植物系青年1 小时前
前端玩数据库 👏 MongoDB/Mongoose 入门指南(上)
前端·mongodb·mongoose
不懂装懂的不懂1 小时前
【 vue + js 】引入图片、base64 编译显示图片
前端·javascript·vue.js