在 REACT 中将 ARRAY 输入到 FORM 字段中答案

【问题标题】：Inputting an ARRAY into a FORM field in REACT在 REACT 中将 ARRAY 输入到 FORM 字段中
【发布时间】：2020-09-03 11:31:54
【问题描述】：

我正在尝试按照 React 中的电子商务产品教程指南来学习编码。我已经完成了产品页面的设置和结帐。

我现在的目标是使用 EmailJS 将购物车：[] 以及结帐总额提取到一个表单中。

import React from 'react';
import emailjs from 'emailjs-com';
import './form.css';
import { ProductConsumer } from '../../context'
import CartList from './CartList'
import CartColumns from "./CartColumns"
import CartTotals from './CartTotals'
import Title from "../Title";
import { ProductProvider } from "../../context"
import CartItem from './CartItem'


export default function CheckOut() {

  function sendEmail(e) {
    alert("Your order has been placed!")
    e.preventDefault();

    emailjs.sendForm('gmail', 'template_3DAGPnwJ', e.target, 'user_m49ol85bvoqFluF8IKatG')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
  }


let Order = "cat"

  return (
    <div>
    <ProductConsumer>
      {value => {
        return(
          <div>
          <Title name="Check" title="Out"/>
          <CartColumns />
          <CartList value={value} />
          <CartTotals value={value}/>
              </div>

        )
      }
    }
      </ProductConsumer>
      <form className="contact-form" onSubmit={sendEmail}>
        <label>Contact Number eg. 12345678 </label>
        <input type="tel" name="contact_number" placeholder="12345678" pattern="[0-9]{8}" required />
        <label>Name</label>
        <input type="name" name="user_name" required />
        <label>Email</label>
        <input type="email" name="user_email" required />
        <label>Address Line 1</label>
        <input type="address-line1" name="user_address1" required />
        <label>Address Line 2</label>
        <input type="address-line2" name="user_address2" />
        <label>Message (eg. Special Requests)</label>
        <textarea name="message_html" />
        <input type="submit" value="Place Order" />
        <textarea name="proudct order" value={Order}/>
      </form>
      </div>
    );
}

到目前为止，textarea 显示 let Order = "cat" 中的 "cat"。 我想将 CartList 和 CartTotal 中的数组信息放入 Order 中。客户提交表格后，我将获得他们的姓名电子邮件地址和他们在购物车中收集的订单。这将通过 EmailJS 通过电子邮件发送给我。

【问题讨论】：

标签： reactjs

【解决方案1】：

您可以而且应该使用state 来更新 React 组件中的任何变量！ CheckOut 是一个功能组件。要在功能组件中使用状态，您必须使用挂钩，即useState。

要从CartList 和CartTotal 获取值并更新Order，请从CheckOut 组件传递回调函数。

请检查以下代码，希望对您有所帮助。

import React, { useState } from "react";
import emailjs from "emailjs-com";
import "./form.css";
import { ProductConsumer } from "../../context";
import CartList from "./CartList";
import CartColumns from "./CartColumns";
import CartTotals from "./CartTotals";
import Title from "../Title";
import { ProductProvider } from "../../context";
import CartItem from "./CartItem";

export default function CheckOut() {
  // Order default value is empty array. i.e. no orders
  // updateOrder will update Order
  const [Order, updateOrder] = useState([]);

  // cartTotal to store CartTotals value
  // updateCartTotal will update cartTotal
  const [cartTotal, updateCartTotal] = useState(0);

  function sendEmail(e) {
    alert("Your order has been placed!");
    e.preventDefault();

    // You can access Order and cartTotal here.
    console.log(Order, cartTotal);

    emailjs
      .sendForm(
        "gmail",
        "template_3DAGPnwJ",
        e.target,
        "user_m49ol85bvoqFluF8IKatG"
      )
      .then(
        (result) => {
          console.log(result.text);
        },
        (error) => {
          console.log(error.text);
        }
      );
  }

  return (
    <div>
      <ProductConsumer>
        {(value) => {
          return (
            <div>
              <Title name="Check" title="Out" />
              <CartColumns />
              {/* updateOrder is a callback passed by prop */}
              <CartList value={value} onCartUpdate={updateOrder} />
              {/* updateCartTotal is a callback passed by prop */}
              <CartTotals value={value} onCartTotalUpdate={updateCartTotal} />
            </div>
          );
        }}
      </ProductConsumer>
      <form className="contact-form" onSubmit={sendEmail}>
        <label>Contact Number eg. 12345678 </label>
        <input
          type="tel"
          name="contact_number"
          placeholder="12345678"
          pattern="[0-9]{8}"
          required
        />
        <label>Name</label>
        <input type="name" name="user_name" required />
        <label>Email</label>
        <input type="email" name="user_email" required />
        <label>Address Line 1</label>
        <input type="address-line1" name="user_address1" required />
        <label>Address Line 2</label>
        <input type="address-line2" name="user_address2" />
        <label>Message (eg. Special Requests)</label>
        <textarea name="message_html" />
        <input type="submit" value="Place Order" />
        <textarea name="proudct order" value={Order} />
      </form>
    </div>
  );
}

我看到您的输入字段不受控制！ React 建议使用受控组件进行表单输入。你可以从这里得到想法 - https://reactjs.org/docs/forms.html#controlled-components

另外，由于您正在学习 React，我建议您阅读 React 的两个核心部分。他们是props 和state。

要使用表单，您可以查看这个流行的表单处理库以获取响应。 https://formik.org/

【讨论】：

感谢您的快速回复！我会努力让它工作并报告！
我已经尝试过代码。最初，必须将 useState 更改为 React.useState 因为编译器说 useState 没有定义。不确定 useState == React.useState。没有错误，我将控制台日志放在电子邮件功能下，提交表单时，它会产生两个空数组。我会继续努力。谢谢！
不客气！您必须分别从您的CartList 和CartTotals 组件调用onCartUpdate 和onCartTotalUpdate 回调。否则它将始终是空数组和零。更准确地说，当任何产品从购物车中添加或移除时，在 CartList 组件上调用 onCartUpdate。

【解决方案2】：

import React from 'react';
import emailjs from 'emailjs-com';
import './form.css';
import { ProductConsumer } from '../../context';
import CartList from './CartList';
import CartTotals from './CartTotals';
import Title from '../Title';



export default function CheckOut() {
  function sendEmail(e) {
    alert('Your order has been placed! Our staff will get in touch with you to confirm your order and to process payment.');
    e.preventDefault();

    emailjs
      .sendForm(
        'gmail',
        'xxxxxxxxx',
        e.target,
        'xxxxxxxxx'
      )
      .then(
        (result) => {
          console.log(result.text);
        },
        (error) => {
          console.log(error.text);
        }
      );
  }

  const Form = ({ context }) => {
    let Order = context.cart.map((item) => `ID: ${item.id} \n${item.title} \t $ ${item.price} \t Qty:${item.count} \n\n`);
    let OrderSubtotal = context.cartSubtotal ;
    let OrderServce = context.cartService;
    let OrderShipping = context.cartShipping;
    let OrderTotal = context.cartTotal;

    return (
      <form className="contact-form" onSubmit={sendEmail}>
        <label>Contact Number eg. 12345678 </label>
        <input
          type="tel"
          name="contact_number"
          placeholder="12345678"
          pattern="[0-9]{8}"
          required
        />
        <label>Name</label>
        <input type="name" name="user_name" required />
        <label>Email</label>
        <input type="email" name="user_email" required />
        <label>Address Line 1</label>
        <input type="address-line1" name="user_address1" required />
        <label>Address Line 2</label>
        <input type="address-line2" name="user_address2" />
        <label>Message (eg. Special Requests)</label>
        <textarea name="message_html" />
        <input type="submit" value="Place Order" />
        <textarea style={{display:"none"}} name="Order" defaultValue={Order} />
        <textarea style={{display:"none"}} name="OrderSubtotal" defaultValue={OrderSubtotal} />
        <textarea style={{display:"none"}} name="OrderServce" defaultValue={OrderServce} />
        <textarea style={{display:"none"}} name="OrderShipping" defaultValue={OrderShipping} />
        <textarea style={{display:"none"}} name="OrderTotal" defaultValue={OrderTotal} />


      </form>
    );
  };

  return (
    <div>
    <ProductConsumer>
      {(value) => {
        return (
          <div>
            <Title name="Check" title="Out" />
            <CartList value={value} />
            <CartTotals value={value} />
            </div>


        );
      }}
      </ProductConsumer>
      <ProductConsumer>
        {(context) => <Form context={context} />}
      </ProductConsumer>
    </div>
  );
}

答案。

从 '../../context' 导入 { ProductConsumer }；

让 Order = context.cart.map((item) => ID: ${item.id} \n${item.title} \t $ ${item.price} \t Qty:${item.count} \n\n);

然后将其导出到 textarea 中的 emailJS。

 <textarea style={{display:"none"}} name="Order" defaultValue={Order} />

并渲染

  <ProductConsumer>
    {(context) => <Form context={context} />}
  </ProductConsumer>

Metafield 在 Scrimba Discord 社区上建议的答案。非常感谢！

【讨论】：