乐趣区

关于react.js:Remix-表单

jiezi

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 中应用了各种表单行为。

退出移动版