记录一下antd Form表单透传值
文章描述
记录一下antd Form表单透传值!有时候我们业务迫使我们不得不封闭一些组件进去,组件内不应该使用Form.Item这样的标签,我们就可以通过props?.onChange回传给antd Form管理
antd Form 的透传,很简单的例子!更多可以看官方给的说明 : 入口
注意:props?.onChange?.(xxx); xxx是你希望antd Form接口的值,props?.onChange可以写在任何地方,你的组件也可以没有任何表单元素;只要在适当时机触发onChange即可
import React from 'react';
import { Button, Form, Input } from 'antd';
interface MyInputProps {
onChange?: (value: string) => void;
}
const MyInput: React.FC<MyInputProps> = (props) => {
const aa = (event: any) => {
// 最重要的表达式,必须要写上
props?.onChange?.(event.target.value);
};
return <div>
<Input onChange={aa}/>
</div>
}
const App: React.FC = () => {
const onFinish = (values: any) => {
console.log('Received values from form: ', values);
};
return (
<Form onFinish={onFinish} >
<Form.Item name="abc" label="DefineInput" >
<MyInput />
</Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form>
);
};
export default App;