Question

我有以下组件，该组件的功能为onClickBtn()，其中包含另一个名为textBuilder()的功能，该功能通过填充来自表单数据的JSON对象进行迭代。单击提交按钮时，我正在使用电子邮件服务以编程方式发送电子邮件。唯一的问题是我的电子邮件的Body值最终在电子邮件中看起来像这样：

name: Dean age: 26 email: dean@aol.com styles: Color locations: Right Leg specificLocation: fasdfasdfa description: fdghjdghj budgets: $1000-$1500 days: Wednesday months: June

代替：

name: Dean 

age: 26 

email: dean@aol.com 

styles: Color 

locations: Right Leg 

specificLocation: fasdfasdfa 

description: fdghjdghj 

budgets: $1000-$1500 

days: Wednesday 

months: June

下面是我的组件。有人可以告诉我我在做什么错吗？

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles(theme => ({
  button: {  margin: theme.spacing(1), },
  input: { display: 'none', },
}));

export default function ContainedButtons(props) {
  const classes = useStyles();  

  const onClickBtn = () => {

    const textBuilder = () => {
      var doc = "";
      for (const key in props.values) {
       doc += key + ": " + props.values[key] + "\n";      
      }
      return doc;
    } 

    window.Email.send({
      Host : "smtp.elasticemail.com",
      Username : "dfmmalaw@gmail.com",
      Password : "d2296492-2689-49f7-ae3d-584f1507d23a",
      To : 'dfmmalaw@gmail.com',
      From : "dfmmalaw@gmail.com",
      Subject : "This is the subject",
      Body : textBuilder()
  }).then(
    message => alert(message)
  );
  };

    return (
      <div>
        <Button variant="contained" color="primary" className={classes.button} disabled = {!props.isEnabled} type="submit" onClick={onClickBtn}>
          Submit
        </Button>
      </div>
    );
}

Answer 1

这是因为您的电子邮件客户端将内容呈现为HTML。因此，换行符只是转换为空格。尝试使用break元素，如下所示：

var entities = new RetailItemEntities(RetailItemConnector.ItemConnectionString);
            var query = from a in entities.ItemAssortments
                        join c in entities.Items on a.Assortment_Nbr.ToString() equals c.ItemNumber
                        join d in entities.ItemStatuses on c.ItemId equals d.ItemId
                        join e in entities.ItemUpcs on c.ItemId equals e.ItemId
                        join f in entities.Upcs on e.UpcId equals f.UpcId
                        join ci in entities.Items on new { ItemNumber = a.Item_Nbr.ToString() } equals
                        new { ItemNumber = ci.ItemNumber } into tempsa1
                        from ci in tempsa1.DefaultIfEmpty()
                        join di in entities.ItemStatuses on new { ItemId = ci.ItemId } equals
                        new { ItemId = di.ItemId } into tempsa2
                        from di in tempsa2.DefaultIfEmpty()
                        join ei in entities.ItemUpcs on new { ItemId = ci.ItemId } equals
                        new { ItemId = ei.ItemId } into temps3
                        from ei in temps3.DefaultIfEmpty()
                        join fi in entities.Upcs on new { UpcId = ei.UpcId } equals
                        new { UpcId = fi.UpcId } into tempsa4
                        from fi in tempsa4.DefaultIfEmpty()
                        where a.AuditYear == 2018 && a.Assortment_Nbr == itemNumber
                        orderby a.Assortment_Nbr, a.Item_Nbr
                        select new ItemAssortmentDto
                        {
                            AssortId = a.AssortId,
                            //Assortment_Nbr = a.Assortment_Nbr,
                            ItemDescription1 = c.ItemDescription,
                            UpcCode1 = f.UpcCode,
                            VendorStockNumber1 = c.VendorStockNumber,
                            ItemInvoiceStatus1 = d.ItemInvoiceStatus,
                            Item_Nbr = a.Item_Nbr.Value,
                            ItemDescription2 = ci.ItemDescription,
                            UpcCode2 = fi.UpcCode,
                            VendorStockNumber2 = ci.VendorStockNumber,
                            ItemInvoiceStatus2 = di.ItemInvoiceStatus,
                            Item_Qty = a.Item_Qty.Value
                        };
            return query;

React：如何显示带有换行符的JSON键值对？

1 个答案: