React点击按钮打开默认邮件客户端，并将textarea中的内容作为邮件正文

Question

这听起来好像以前已经被问过了，但我只能找到如何在React Native中完成此操作，而我找不到如何在普通的React web中完成此操作。最好不要使用需要进行样式化的a标签或Link标签。

下面是一些代码，用于说明我想要做什么：

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:[e-mail]?body=My custom mail body">E-Mail to Max Mustermann</a>

- CodingYourLife

---

在语义上使用a标签(<a />)是正确的。对于应用一些样式到该元素本身（而不是可能应用于底层button元素的样式），是否存在问题？ - Drew Reese

你是在询问如何通过编程打开mailTo（https://dev59.com/HGEi5IYBdhLWcg3wPKax），还是获取TextArea中的文本值？ - GitGitBoom

@GitGitBoom 是的，我最终使用 window.location 来实现了这个。如果您将其作为答案提交，我将批准它 :) - CodingYourLife

链接到其他答案并不是真正的答案，但您可以通过给链接的答案点赞来表达您的感激之情。 - Drew Reese

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:[e-mail]" />

- CodingYourLife

---

在使用React、Next.js和TS时，我遇到了一个错误：Type 'string' is not assignable to type 'Location'. 将 window.location 更改为 window.location.href 可以解决这个问题。 - tsb5555

谢谢。似乎这就是应该使用的方式。代码答案也已更改。 - CodingYourLife

Answer 2

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

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

- Code_Elixer

---

在使用React、Next.js和TS时，我遇到了一个错误：Type 'string' is not assignable to type 'Location'. 将 window.location 更改为 window.location.href 可以解决这个问题。 - tsb5555

这是一个完美的解决方案。 - Dzenis H.

Answer 3

试试这个

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

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

- GMKHussain

---

有关 typings 的任何想法吗？“类型“字符串”不能赋值给类型“位置””。 - ChumiestBucket

@ChumiestBucket，请查看此答案 https://dev59.com/fGcs5IYBdhLWcg3wHwfU#13106955！ - Raphael Escrig

Answer 4

让JSX中的任何元素点击后写邮件，代码如下：

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

试一试吧。

- Ej Mahadi

Answer 5

基于@CodingYourLife的解决方案和这个问题的主要主题，我根据自己的两个需求制作了组件的版本。我将react-router-dom的行为与<A> HTML标签的本地行为相结合。

---

Link 组件的文件

• index.tsx
• types.ts
• styles.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

- Kas Elvirov