脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → Remix 表单用法

归纳总结Remix 表单常用方法及示例详解

 更新时间：2023年03月24日 11:38:01   作者：乔治_x  
这篇文章主要为大家归纳总结了Remix 表单常用方法及示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

Remix 的三种表单

  • 原生表单
  • Remix 提供的表单组件
  • Remix fetcher 表单

回顾表单基础

  • 提交行为：enter 按键(只有一个 input type="txt")/使用具有 type=sumbit 的按钮
  • method 不指定时，form 默认使用 get 方法
  • form 提交后默认行为是跳转到 action 对应的页面
  • 表单的提交方式是 content-type = x-www-form-unlencoded

表单提交的形式

  • 使用 html 标签属性，自动提交
  • 手动提交：钩子函数 sumit 提交方式， fetcher.sumbit 提交方式

阻止跳转

通常我们不希望提交表单后发生跳转行为：使用事件阻止函数进行阻止。

const handleClick = (e) => {
 e.preventDefault()
}

Remix 提供的表单组件

import { Form } from "@remix-run/react";

一个简单的 demo

import { json } from "@remix-run/node";
import { Form } from "@remix-run/react";
export async function action () {
  let data = {
    a: 'this is data'
  }
  return json({
    ...data
  })
}
export default function Index() {
  return (
    <div>
      <div>Remix Form</div>
      <Form method="post">
        <input type="text" name="a-name-remix"/>
        <button type="submit">submit-remix</button>
      </Form>
    </div>
  );
}

注意：Form 组件没有定义 method 的时候，点击提交按钮没有任何效果。一般添加 method='post'。添加之后就可以正常提交 post 请求表单。

使用钩子函数提交函数

import { json } from "@remix-run/node";
import { Form, useSubmit } from "@remix-run/react";
export async function action () {
  let data = {
    a: 'this is data'
  }
  console.log(data)
  return json({
    ...data
  })
}
export default function Index() {
  const submit = useSubmit();
  const handleClick = (e) => {
    e.preventDefault()
    submit(e.target, {
      method: 'post'
    })
  }
  return (
    <div>
      <div>Remix Form</div>
      <Form onSubmit={handleClick}>
        <input type="text" name="a-name-remix"/>
        <button type="submit">submit-remix</button>
      </Form>
    </div>
  );
}

注意手动提交之前先要阻止事件默认行为。

Remix fetcher 表单

一个简单的 demo

import { json } from "@remix-run/node";
import { useFetcher } from "@remix-run/react";
export async function action () {
  let data = {
    a: 'this is data'
  }
  return json({
    ...data
  })
}
export default function Index() {
  const fetcher = useFetcher();
  return (
    <div>
      <div>Remix Form</div>
      <fetcher.Form method="post">
        <input type="text" name="a-name-remix"/>
        <button type="submit">submit-remix</button>
      </fetcher.Form>
    </div>
  );
}

Form 添加 post 方法，点击提交按钮，自动提交到当前 Route 模块中的 action 方法中。

没有定义

  • method 属性
  • action 属性

没有定义以上两个属性，提交代码的时候，提交函数不会执行

使用 fetcher.submit 函数提交

import { json } from "@remix-run/node";
import { useFetcher } from "@remix-run/react";
export async function action () {
  let data = {
    a: 'this is data'
  }
  console.log(data)
  return json({
    ...data
  })
}
export default function Index() {
  const fetcher = useFetcher();
  const onSubmit = (e) => {
    e.preventDefault();
    fetcher.submit(e.target, {
      method: 'post',
      action: '/main/form'
    })
  }
  return (
    <div>
      <div>Remix Form</div>
      <fetcher.Form onSubmit={onSubmit}>
        <input type="text" name="a-name-remix"/>
        <button type="submit">submit-remix</button>
      </fetcher.Form>
    </div>
  );
}

onSubmit 中首先就是要解决提交的默认行为问题，阻止了表单的默认行为之后，使用 submit 方法其实与钩子函数 submit 是一样的。

useFetcher 的其他内容

  • state 表示当前的条状态 idle/submitting/loading 等
  • data 表示 action 中响应的数据
  • load 函数表示从路由中读取 action 函数返回的数据
  • submission 是可能构建 optimistic UI

其他的表单

  • 一个使用 useSubmit 钩子函数手动提交 antd 表单的例子
import { Form, Input, Button } from "antd";
import { useSubmit } from "@remix-run/react";
export async function action() {
  return {
    a: 1
  }
}
export default function () {
  const submit = useSubmit();
  const handleClick = (data) => {
    submit(data, {
      method: "post",
    });
  };
  return (
    <div>
      <Form onFinish={handleClick}>
        <Form.Item name="name">
          <Input />
        </Form.Item>
        <Button htmlType="submit" >
          提交
        </Button>
      </Form>
    </div>
  );
}
  • 一个手动提交 antd pro-component 表单的例子
import { Button } from "antd";
import { ProForm, ProFormText } from '@ant-design/pro-components'
import { useSubmit } from "@remix-run/react";
export async function action() {
  return {
    a: 1
  }
}
export default function () {
  const submit = useSubmit();
  const handleClick = async (data: any) => {
    submit(data, {
      method: "post",
    });
    return false
  };
  return (
    <div>
      <ProForm onFinish={handleClick}>
        <ProFormText name="name" />
        <Button htmlType="submit" >
          提交
        </Button>
      </ProForm>
    </div>
  );
}

小结

回顾的表单的默认行为，以及在 Remix 提供的表单能力 Form/fetcher.Form。手动提交以及自动管理的两种方式。其次在 antd 系统的表单中使用 useSubmit 手动提交钩子函数。大概讲到了 Remix 中使用了各种表单行为。更多关于Remix 表单用法的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • react中setState的执行机制详解

    react中setState的执行机制详解

    setState() 的执行机制包括状态合并、批量更新、异步更新、虚拟 DOM 比较和渲染组件等步骤,这样可以提高性能并优化渲染过程,这篇文章主要介绍了react中的setState的执行机制,需要的朋友可以参考下
    2023-10-10
  • 详解React native fetch遇到的坑

    详解React native fetch遇到的坑

    这篇文章主要介绍了详解React native fetch遇到的坑,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • React中使用antd组件的方法

    React中使用antd组件的方法

    antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品，这篇文章主要介绍了React中使用antd组件,需要的朋友可以参考下
    2022-09-09
  • React Native 的动态列表方案探索详解

    React Native 的动态列表方案探索详解

    这篇文章主要为大家介绍了React Native 的动态列表方案探索示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • react+antd+upload结合使用示例

    react+antd+upload结合使用示例

    这篇文章主要为大家介绍了react+antd+upload结合使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-05-05
  • React手写redux过程分步讲解

    React手写redux过程分步讲解

    这篇文章主要介绍了React手写redux过程，目前redux在react中使用是最多的，所以我们需要将之前编写的redux代码，融入到react当中去，本文给大家详细讲解，需要的朋友可以参考下
    2022-12-12
  • 浅谈React + Webpack 构建打包优化

    浅谈React + Webpack 构建打包优化

    本篇文章主要介绍了浅谈React + Webpack 构建打包优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • react antd-mobile ActionSheet+tag实现多选方式

    react antd-mobile ActionSheet+tag实现多选方式

    这篇文章主要介绍了react antd-mobile ActionSheet+tag实现多选方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • React中useState原理的代码简单实现

    React中useState原理的代码简单实现

    要实现useState的背后原理,则需要深入了解状态是如何在函数组件的渲染周期中保持和更新的,本文将通过一段代码简单阐述useState钩子函数的实现思路,希望对大家有所帮助
    2023-12-12
  • react中使用video.js的踩坑记录

    react中使用video.js的踩坑记录

    这篇文章主要介绍了react中使用video.js的踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07

最新评论