记录一下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;

 

评论(共0条)