标签: react-forms

我有两个按钮，一个是“按钮”类型，一个是“提交”类型，两者都包装在表单中并且相互切换。奇怪的是，如果我单击“按钮”类型的按钮，则会提交表单，而如果我单击“提交”类型的按钮，则不会提交表单。

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);

function App() {
  const [clicked, setClicked] = React.useState(false);

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        console.log("form submitted!");
      }}
    >
      {!clicked ? (
        <button type="button" onClick={() => setClicked(true)}>
          Button 1
        </button>
      ) : (
        <button type="submit" onClick={() => setClicked(false)}>
          Button 2
        </button>
      )}
    </form>
  );
}

root.render(
  <App />
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<div id='root'></div>

我预计提交表格时的情况恰恰相反。

这是我的表单和CodeSanbox 的样子。目前我正在使用 react-hook-form，
因为您可以看到表单有 3 个输入。在输入所有必填字段之前，应禁用提交按钮。两个用例：

1. 如果未选中“检查”：
   • 只有“id”应该被验证并且提交按钮应该被启用。“第一个”和“姓氏”名称不应是表单数据的一部分
2. 如果选中“检查”
   • 所有字段都应验证
     名字，只有在选中“检查”时才需要姓氏。所以它没有被检查然后表单应该只验证“ID”字段。如果选中“检查”，则所有字段都应得到验证。

我遇到的问题是，如果我输入 id，表单状态仍然是“无效”。表单需要输入名字和姓氏的值。
我将不胜感激任何帮助。

我正在使用 React Formik，该表单有超过 30 个输入字段，当输入时字段渲染速度很慢，打印速度很慢，并且更轻松，任何提高字段速度的想法都会稍微慢一些。请检查codesandbox

代码沙盒链接：https://codesandbox.io/s/goofy-bassi-5s0c9 ?file=/src/App.js

我有一个更新的 ProfilePage 组件，我想使用 useQuery 从 Axios API 请求接收到的数据预加载表单值，但似乎 useFormik initialValues 在请求完成之前渲染，因此初始值未定义，任何人都可以帮忙我 ？

  const { isSuccess, data } = useQuery("author", async () => {
    const endPoint = `${baseURL}/auth/author`;
    return Axios.get(endPoint, {
      headers: {
        "x-auth-token": token,
      },
    })
      .then(({ data }) => {
        return data.author;
      })
      .catch((err) => {
        setErrors(err.response.data.errors[0].msg);
        console.log(errors);
      });
  });

  const formik = useFormik({
    initialValues: {
      firstname: data.firstname,
      lastname: data.lastname,
      gender: data.gender,
      dob: data.dob,
      email: data.email,
      oldPassword: "",
      newPassword: "",
      confirmNewPassword: "",
      profilePic: "",
    },
    validationSchema: Yup.object({
      firstname: Yup.string() …

我想向输入字段添加验证。我正在使用反应钩子形式。验证应类似于字段总和应为 100。如果任何字段使总和大于或小于 100，则应在输入字段（最后编辑的字段）处显示错误。

沙箱网址： https://codesandbox.io/s/distracted-elion-z2wob ?file=/src/App.js

谢谢

我正在使用 React formik，我在单个组件中创建了创建表单和更新表单。基于一个id的更新如果更新意味着在页面上id将在post方法中发送并获取数据数据库并且数据显示在输入字段中并且更新也工作正常。但是在渲染组件中速度很慢并导致很多错误，我希望 useEffect 将在渲染函数之外，并且在输入显示后该字段会稍微延迟

任何想法和任何更好的方法谢谢您的帮助

import React, { useEffect, useState } from "react";
import { Formik, Field, Form, FastField } from "formik";
import axios from "axios";
import {
  Button,
  TextField,
  Grid,
  makeStyles,
  MenuItem,
  FormControl,
  Select,
  InputLabel,
  Checkbox,
  FormControlLabel
} from "@material-ui/core/";

const baseurl = "http://localhost:8080/api/v1/";
const useStyles = makeStyles((theme) => ({
 
}));

function App() {
  const classes = useStyles();
  var PropertyId = sessionStorage.getItem("Propertyid");
  const data = { propertyId: PropertyId };
  const isAddMode = !PropertyId;

  const initialValues = {
    propertyName: …

我是反应钩子形式的新手。我在下面粘贴我的代码

import React from "react";
import { useForm } from "react-hook-form";

const Inventory = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        className="border border-gray-900 rounded-lg p-2"
        type="number"
        placeholder="Number"
        ref={register("number", { required: true })}
      />
      {errors.number && <p>This is required</p>}
      <button
        className="mt-4 text-white bg-gray-900 border-2 border-gray-900 rounded-md px-2 py-1"
        type="submit"
      >
        Add
      </button>
    </form>
  );
};

export default Inventory;

当我提交表单时，我在控制台中没有得到任何输出。我还收到警告

Warning: Unexpected …

我正在研究一个复杂的反应形式，它几乎没有受控输入以及网格/表格。目前我正在使用react-hook-form进行验证。
这是我的模型。这里的想法是根据需要显示网格，直到用户添加一些数据。用户可以通过单击“+”或“-”按钮添加/删除数据。


当我在这里提交时，我在提交的数据中看到的是

{
  "fname": "sasa",
  "lname": "asasasa"
} 

这是预期的输出

{
  "fname": "sasa",
  "lname": "asasasa",
  "localAddress":[
    {
      "street1":"street1",
      "street2":"street2",
      "city":"city"
    },
    {
      "street1":"street2",
      "street2":"street2",
      "city":"city"
    }
  ]
} 

这是我的codesanbox
Codesanbox

不知道如何将react-table（或任何表组件）与react-hook-form（或任何react形式）集成。使用“react-table”构建表单对我来说是必须的。

感谢任何帮助。

我一直在研究一种反应形式，我需要限制用户输入特殊字符并只允许这些字符：[A-Za-z]。

我已经尝试了下面的代码，但我仍然能够插入特殊字符，例如：“?”、“>”、“+”等。

export default Component (props {
  ...
  return (
   <input 
    pattern={props.pattern}
   /> 
  )
}

我将它作为道具发送到我的表单中：

<Component 
pattern="[A-Za-z]+"
/>

你能告诉我我遗漏了什么并指出可能是什么问题吗？非常感谢。

我的 React 应用程序在表单标签上有 20 多个字段。我的工作代码如下

function DriverForm() {
    const [formData1, setFormData1] = useState(1);
    const [formData2, setFormData2] = useState(2);
    const [formData3, setFormData3] = useState(3);
    const [formData4, setFormData4] = useState(4);
    const [formData5, setFormData5] = useState(5);

    const handleSubmit = (event) => {
        event.preventDefault();
    };

    return (
        <div className="wrapper">
            <form onSubmit={handleSubmit}>
                <input value={formData1} onChange={(e) => setFormData1(e.target.value)} />
                <input value={formData2} onChange={(e) => setFormData2(e.target.value)} />
                <input value={formData3} onChange={(e) => setFormData3(e.target.value)} />
                <input value={formData4} onChange={(e) => setFormData4(e.target.value)} />
                <input value={formData5} onChange={(e) => setFormData5(e.target.value)} />
                <button type="submit">Submit</button>
            </form> …