渲染和捕获表单数据的问题..REACT

Question

我遇到了问题。我创建了一个表单，当我单击 index.tsx 文件中的添加按钮时，它没有添加。但是，当我尝试渲染虚拟产品列表时，它起作用了。我把代码分享给大家看一下。问题是 ProductList.map 没有被渲染。

// React
import { useContext, useState } from "react";

// Componentes
import { TitleModals } from "@src/components/TitleModals/TitleModas";
import BtnConfirmation from "@src/components/botoes/Confirmation/confirmation";
import BtnNegacao from "@src/components/botoes/Negacao/negacao";

// Contextos
import { CustomizeSystemContext } from "@src/context/CustomizeSystemContext";
import { ModalContext } from "@src/components/Modal/modal";

// Zustand
import { userProductsStore } from "@src/store/userProductsStore";

// Icones
import { VscTrash } from "react-icons/vsc";
import { MdOutlineModeEdit } from "react-icons/md";
import { AddProduct } from "@src/modal/createEncomenda";

export interface IProduct {
  id: string;
  nome: string;
  date: string;
  transportadora: string;
  codigo: string | number;
  link?: string;
}

export default function Products() {
  // Context Tradução
  const { language } = useContext(CustomizeSystemContext);
  //=> Modal
  const { open } = ModalContext();

  const {} = userProductsStore();

  const dummyProductList: IProduct[] = [
    {
      id: new Date().toJSON().toString(),
      nome: "Carrinho De Brinquedo",
      date: "19/12/2004",
      transportadora: "Correios",
      codigo: "XYZ123456789",
      link: "https://exemplo.com/rastreamento/XYZ123456789",
    },
  ];

  const [productList, setProductList] = useState(
    dummyProductList as IProduct[]
  );

  const addProduct = (data: IProduct) => {
    setProductList([...productList, data]);
  };

  const ProductList = () =>
    productList.map((product) => (
      <tr key={product.id} className="hover:bg-base-200 cursor-pointer">
        <td className="rounded-l-lg">
          <div className="flex justify-center">
            <span className="block max-w-[130px]">{`${product.nome}`}</span>
          </div>
        </td>
        <td>{`${product.date}`}</td>
        <td>{`${product.transportadora}`}</td>
        <td>{`${product.codigo}`}</td>
        <td>
          <a
            href={product.link}
            target="_blank"
            className="btn btn-outline btn-accent">
            Rastrear
          </a>
        </td>
        <td className="rounded-r-lg">
          <div className="flex justify-center gap-2">
            <span className="pulse">
              <MdOutlineModeEdit className="h-5 w-5" />
            </span>

            <span className="pulse">
              <VscTrash className="h-5 w-5" />
            </span>
          </div>
        </td>
      </tr>
    ));

    console.log(productList);

  const produtosAdicionados = (
    <div className="w-auto grid gap-4">
      <TitleModals>{language.modal_orders_title}</TitleModals>

      <div
        className="overflow-auto"
        style={{ maxHeight: "calc(100vh - 300px)" }}>
        <table className="table text-center">
          {/* head */}
          <thead>
            <tr>
              <th>{language.modal_table_name}</th>
              <th>{language.modal_table_data}</th>
              <th>{language.modal_table_transport}</th>
              <th>{language.modal_table_code}</th>
              <th>{language.modal_table_link}</th>
              <th>{language.modal_table_acoes}</th>
            </tr>
          </thead>

          <tbody>
            <ProductList />

            {/*showPage === PageEnum.list && <ProductList list={productList} />*/}
            {/*showPage === PageEnum.add && (
              <AddProduct
                onBackBtnClickHnd={showListPage}
                onSubmitClickHnd={addProduct}
              />
            )*/}
          </tbody>
        </table>
      </div>

      <div className="flex justify-center py-3">
        <BtnConfirmation
          name={language.create}
          funcao={() =>
            open(
              <AddProduct
                onBackBtnClickHnd={() => open(<Products />)}
                onSubmitClickHnd={addProduct}
              />
            )
          }
        />
      </div>
    </div>
  );

  return produtosAdicionados;
}

其他文件

// React
import { useContext, useState } from "react";

// Componentes
import BtnConfirmation from "@src/components/botoes/Confirmation/confirmation";
import BtnNegacao from "@src/components/botoes/Negacao/negacao";
import { TitleModals } from "@src/components/TitleModals/TitleModas";
import { IProduct } from "@src/pages/content/chatOpen/menuVertical/components/products";

// Contextos
import { CustomizeSystemContext } from "@src/context/CustomizeSystemContext";
import { data } from "jquery";

type Props = {
  onBackBtnClickHnd: () => void;
  onSubmitClickHnd: (data: IProduct) => void;
};




export const AddProduct = (props: Props) => {
  // Context Tradução
  const { language } = useContext(CustomizeSystemContext);

  const [nome, setNome] = useState("");
  const [date, setDate] = useState("");
  const [transportadora, setTransportadora] = useState("");
  const [codigo, setCodigo] = useState("");

  const { onBackBtnClickHnd, onSubmitClickHnd } = props;

  const onSubmitBtnClickHnd = (e: any) => {
    e.preventDefault();
    const data: IProduct = {
      id: new Date().toJSON.toString(),
      nome: nome,
      date: date,
      transportadora: transportadora,
      codigo: codigo,
      link: "",
    };
    onSubmitClickHnd(data);
    onBackBtnClickHnd();
    console.log(data)
    console.log(onSubmitClickHnd)
    console.log(onSubmitBtnClickHnd)
    console.log(onSubmitBtnClickHnd(data))
  };

  return (
    <form
      className="w-[600px] grid gap-4 overflow-auto pr-1"
      style={{ maxHeight: "calc(100vh - 70px)" }}
      onSubmit={onSubmitBtnClickHnd}>
      <TitleModals>{language.modal_orders_title}</TitleModals>

      <div className="form-control w-full">
        <label className="label">
          <span className="label-text">{language.modal_table_name}</span>
        </label>

        <input
          type="text"
          placeholder={language.modal_table_insert_name}
          className="input input-bordered w-full input-sm"
          value={nome}
          onChange={(e) => setNome(e.target.value)}
        />
      </div>

      <div className="flex justify-between gap-6">
        <div className="form-control w-full max-w-xs">
          <label className="label">
            <span className="label-text">{language.modal_table_data}</span>
          </label>

          <input
            type="Date"
            className="input input-bordered w-full max-w-xs input-sm"
            value={date}
            onChange={(e) => setDate(e.target.value)}
          />
        </div>

        <div className="form-control w-full max-w-xs">
          <label className="label">
            <span className="label-text">{language.modal_table_code}</span>
          </label>

          <input
            type="text"
            className="input input-bordered w-full max-w-xs input-sm"
            placeholder={language.modal_table_insert_code}
            value={codigo}
            onChange={(e) => setCodigo(e.target.value)}
          />
        </div>
      </div>

      <div className="form-control w-full">
        <label className="label">
          <span className="label-text">{language.modal_table_transport}</span>
        </label>

        <select
          className="!py-0 select select-bordered !select-sm w-full"
          onChange={(e) => setTransportadora(e.target.value)}>
          <option value={""}>{language.noneSelected}</option>
          <option value={"Correios"}>Correios</option>
          <option value={"Jadlog"}>Jadlog</option>
          <option value={"Outras"}>Outras</option>
        </select>
      </div>

      <div className="flex justify-center gap-2 items-center m-auto pt-4 resize-none">
        <BtnConfirmation name={language.added} funcao={onSubmitBtnClickHnd} />
        <BtnNegacao name={language.cancel} funcao={onBackBtnClickHnd} />
      </div>
    </form>
  );
};

我已经尝试了一切，但它没有渲染。

Answer 1

保留按钮类型为提交并删除

onClick

功能。

当单击该按钮时，类型为

submit

的按钮将调用表单中的

onSubmit

。

<form
  className='w-[600px] grid gap-4 overflow-auto pr-1'
  style={{ maxHeight: 'calc(100vh - 70px)' }}
  onSubmit={(e)=>onSubmitBtnClickHnd(e)}
>
  <TitleModals>{language.modal_orders_title}</TitleModals>

  <div className='form-control w-full'>
    <label className='label'>
      <span className='label-text'>{language.modal_table_name}</span>
    </label>

    <input
      type='text'
      placeholder={language.modal_table_insert_name}
      className='input input-bordered w-full input-sm'
      value={nome}
      onChange={(e) => setNome(e.target.value)}
    />
  </div>

  <div className='flex justify-between gap-6'>
    <div className='form-control w-full max-w-xs'>
      <label className='label'>
        <span className='label-text'>{language.modal_table_data}</span>
      </label>

      <input
        type='Date'
        className='input input-bordered w-full max-w-xs input-sm'
        value={date}
        onChange={(e) => setDate(e.target.value)}
      />
    </div>

    <div className='form-control w-full max-w-xs'>
      <label className='label'>
        <span className='label-text'>{language.modal_table_code}</span>
      </label>

      <input
        type='text'
        className='input input-bordered w-full max-w-xs input-sm'
        placeholder={language.modal_table_insert_code}
        value={codigo}
        onChange={(e) => setCodigo(e.target.value)}
      />
    </div>
  </div>

  <div className='form-control w-full'>
    <label className='label'>
      <span className='label-text'>{language.modal_table_transport}</span>
    </label>

    <select
      className='!py-0 select select-bordered !select-sm w-full'
      onChange={(e) => setTransportadora(e.target.value)}
    >
      <option value={''}>{language.noneSelected}</option>
      <option value={'Correios'}>Correios</option>
      <option value={'Jadlog'}>Jadlog</option>
      <option value={'Outras'}>Outras</option>
    </select>
  </div>

  <div className='flex justify-center gap-2 items-center m-auto pt-4 resize-none'>
    <BtnConfirmation
      type='submit'
      name={language.added}
      funcao={onSubmitBtnClickHnd}
    />
    <BtnNegacao
      type='button'
      name={language.cancel}
      funcao={onBackBtnClickHnd}
    />
  </div>
</form>;