通过文本区域中的正文对打开的邮件做出反应到电子邮件客户端

Question

这听起来肯定是以前被问过的，但我只能找到如何在本机反应中做到这一点，但我找不到它在正常的网络反应中是如何完成的。最好不带有需要设置样式的标签或链接标签。

这里有一些代码来说明我想要做什么：

const onClickMailtoHandler = () => {
    //TODO: open default e-mail client e.g. via mailto link with text from (state) variable as body
}

<Button onClick={onClickMailtoHandler}>Send E-Mail</Button>

以下是如何在 HTML 中创建 mailto 链接：

<a href="mailto:[email protected]?body=My custom mail body">E-Mail to Max Mustermann</a>

Answer 1

我最终创建了一个类似于 @GitGitBoom 在评论中建议的组件。

这里为未来的探索者：

import React from "react";
import { Link } from "react-router-dom";

const ButtonMailto = ({ mailto, label }) => {
    return (
        <Link
            to='#'
            onClick={(e) => {
                window.location.href = mailto;
                e.preventDefault();
            }}
        >
            {label}
        </Link>
    );
};

export default ButtonMailto;

像这样使用它：

<ButtonMailto label="Write me an E-Mail" mailto="mailto:[email protected]" />

Answer 2

我使用以下方法在单击按钮时打开默认邮件客户端：

<button onClick={() => window.location = 'mailto:[email protected]'}>Contact Me</button>

Answer 3

试试这个

<Link to='javascript:void(0)'
      onClick={() => window.location = 'mailto:[email protected]'}>
  Contact Me
</Link>

<OtherElement onClick={() => window.location = 'mailto:[email protected]'}>
  Contact Me
</OtherElement>

Answer 4

使jsx中的任何元素点击邮件写下这个=

<div onClick={(e) => {window.location.href ='mailto:[email protected]';}}>any thing here </div>

试试吧。

Answer 5

基于@CodingYourLife的解决方案和这个问题的主要主题，我根据我的两个需求制作了我的组件版本。我将

react-router-dom

行为与

<A>

html 标签的本机行为结合起来。

---

Link

组件的文件

• index.tsx
• 类型.ts
• 样式.ts

index.tsx

（下）

import * as React from 'react';

import Typography from '@material-ui/core/Typography';

import { withStyles } from '@material-ui/core';

import { Link as RouterLink } from 'react-router-dom';

import styles from './styles';

import { IProps } from './types';

/**
 * Just a wrapper in order to style properly
 *
 * - router link
 * - native html <a> link
*/
class Link extends React.PureComponent<IProps> {
    render(): JSX.Element {
        const {
            classes,
            href,
            children,
            ...routerLinkProps
        } = this.props;

        if (typeof href === 'string') {
            return (
                <a href={href}>
                    <Typography
                        className={classes.value}
                    >
                        {children}
                    </Typography>
                </a>
            );
        }

        return (
            <RouterLink
                to={'#'} // for <a> link default value because it's required by its lib
                {...routerLinkProps}
            >
                <Typography
                    className={classes.value}
                >
                    {children}
                </Typography>
            </RouterLink>
        );
    }
}

export default withStyles(styles)(Link);

styles.ts

（下）

import { Theme, createStyles } from '@material-ui/core';

export default (theme: Theme): ReturnType<typeof createStyles> => createStyles({
    value: {
        display: 'inline-block',
        color: theme.palette.secondary.main,
        fontWeight: 500,

        '&:hover': {
            textDecoration: 'underline',
        },
    },
});

types.ts

（下）

import {
    WithStyles,
} from '@material-ui/core';

import { LinkProps } from 'react-router-dom';

import styles from './styles';

export type IProps = WithStyles<typeof styles> & Partial<LinkProps> & {
    href?: string;
};

使用的库：material-ui

Answer 6

我在 NextJS 14 中通过将属性

as={Link}

传递给 ListGroup 组件并将

href

属性传递为

href='mailto:[email protected]'

来实现这一点

import Link from next/link
import ListGroup from "react-bootstrap/ListGroup";

    <ListGroup.Item as={Link} href='mailto:[email protected]' className={styles.listGroupItem}>
                  [email protected]
                </ListGroup.Item>