Reactjs 使用文本区域中的正文单击打开邮件到电子邮件客户端

这听起来像是以前问过的问题，但我只能在react native中找到如何做到这一点，但我找不到在普通react for web中如何做到这一点。最好不要使用需要设置样式的标记或链接标记

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

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>

const onClickMailtoHandler=（）=>{
//TODO:打开默认电子邮件客户端，例如通过mailto链接，将文本从（状态）变量作为正文
}
发送电子邮件

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

<a href="mailto:max.mustermann@example.com?body=My custom mail body">E-Mail to Max Mustermann</a>

---

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

以下为未来的求职者：

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

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

export default ButtonMailto;

从“React”导入React；
从“react router dom”导入{Link}；
const ButtonMailto=（{mailto，label}）=>{
返回(
{
window.location=mailto；
e、 预防默认值（）；
}}
>
{label}
);
};
导出默认按钮提示；

像这样使用它：

<ButtonMailto label="Write me an E-Mail" mailto="mailto:no-reply@example.com" />

---

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

react路由器dom

行为与

请告诉我它是否有效）
使用a标记（
）在语义上是正确的。将某种样式应用于该元素（与可能应用于底层
按钮
元素的样式相反）是否存在问题？您是否在询问如何以编程方式打开mailTo（）或从TextArea获取文本值？@gitgibom是的，我只是在window.location上完成了这项操作。如果您以这样的方式提交，我会批准此作为答案：）指向其他答案的链接不是真正的答案，但您当然可以通过向上投票链接的答案来表示感谢。
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);

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',
        },
    },
});

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;
};