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