React class 类型组件 转 函数化的 Hooks

Question

大致学习了　函数化的 Hooks例子，实际操作还是蒙。若把一处理解透了，可能也就行了。比如<Modal>标签的提交和重置.interface直接拿过来就行,原来的props怎么写呢?

const [abcxxx, setxxx] = useState<boolean>(true);

class 类型组件:

interface CreateFormProps extends FormComponentProps {
  modalVisible: boolean;
  onSubmit: (fieldsValue: { desc: string }) => void;
  onCancel: () => void;
}

const CreateForm: React.FC<CreateFormProps> = props => {
  const { modalVisible, form, onSubmit: handleAdd, onCancel } = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handleAdd(fieldsValue);
    });
  };
  const handleSubmit = () => {
    props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };
  
  return (
    <Modal
      width={940}
      destroyOnClose
      title="新建规则"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
      maskClosable={false}
      cancelText={'重置'}
      okText={'提交'}
    >
    ...省略