表单未在 React JS 中提交

Question

我有一个可以在控制台中打印数据的表单，但不幸的是我做不到。我想在提交表单时将数据打印到控制台。表格没有提交不知道为什么。我有下面的代码。如果您能决定，我将不胜感激。

import { Button, Grid, Paper, TextField } from "@mui/material";
import React from "react";
import { useForm } from "react-hook-form";

export default function Page2(props) {
    const { handleSubmit } = useForm();

    const handelInputChange = (e) => {
        const { name, value } = e.target;
        console.log(name, value);
    };

    const handleData = (data) => {
        console.log("data");
    };

    return (
        <>
            <Paper
                style={{ margin: "10px auto", textAlign: "center" }}
                elevation={24}  >
                <h1 style={{ textAlign: "center" }}>Todo Application</h1>
                <form onSubmit={handleSubmit(handleData)}>
                    <Grid
                        style={{ margin: "10px" }}
                        container
                        spacing={1}
                        direction="column"  >
                        <Grid item xs={6}>
                            <TextField
                                name="title"
                                label="Title"
                                variant="standard"
                                onChange={handelInputChange} />
                            <TextField
                                name="desc"
                                label="Description"
                                variant="standard"
                                onChange={handelInputChange} />
                            <TextField
                                name="priority"
                                type="number"
                                label="Priority"
                                variant="standard"
                                onChange={handelInputChange} />
                        </Grid>
                    </Grid>
                </form>    
                <button type="submit" variant="contained" color="primary">
                    Add
                </button>
            </Paper>
        </>
    );
}

Answer 1

你的 HTML 结构有误。 button[type=submit] 应该在 <form> 标签内

Answer 2

要将此表格发送到 console.log，您还有很多事情要做。首先，正如另一位发帖人提到的那样，提交 button 需要在表单内（您可能希望将“<Button”中的 B 大写，以便您使用 MUI组件。

          <form onSubmit={handleSubmit(handleData)}>
            <Grid
              style={{ margin: "10px" }}
              container
              spacing={1}
              direction="column"
            >
              <Grid item xs={6}>
                <TextField
                  name="title"
                  label="Title"
                  variant="standard"
                  onChange={handelInputChange}
                />
                ...
              </Grid>
            </Grid>
            // Moved and renamed here
            <Button type="submit" variant="contained" color="primary">
              Add
            </Button>
          </form>

这解决了您的提交问题，但是随后您会注意到 console.log("data") 将只包含一个空对象 {} -- 这是因为 react-form-hooks 需要被赋予一个FormProvider 并意识到它应该控制的表单中的表单元素。为此，您需要注册该组件。我已添加 working code example 一种方法来完成此任务。

在这个例子中，我创建了一个通用的 FormFieldController 包装器，您可以使用它来传递您需要的任何表单字段。（我不会在没有清理的情况下在生产代码中使用它，因为它仅作为示例）：

const FormFieldController = ({
  component: Component = TextField,
  name = "",
  defaultValue = "",
  label = "",
  validation = {},
  required = false,
  valueProp = "value",
  callbackProp = "onChange",
  onChange,
  ...rest
}) => {
  const { control } = useFormContext();

  return (
    <Controller
      name={name}
      control={control}
      defaultValue={defaultValue}
      rules={validation}
      render={({
        field: { onChange: internalOnChange, value, ref },
        fieldState: { error }
      }) => {
        const pipes = {
          [valueProp]: value,
          [callbackProp]: function () {
            internalOnChange.apply(this, arguments);

            // Middleman callback to allow for onChange back to the caller, if needed
            if (onChange) {
              onChange.apply(this, arguments);
            }
          }
        };
        return (
          <>
            <Component
              id={name}
              inputRef={ref}
              caption={error ? error?.message : ""}
              label={label}
              {...pipes}
              {...rest}
            />
          </>
        );
      }}
    />
  );
};

Working CodeSandbox Example

Answer 3

除了 Steve，您还可以使用简单的 register 函数来为您完成工作，只需在 MUI 表单组件的 inputRef 中提供 register 函数即可。

import { Button, Grid, Paper, TextField } from "@mui/material";
import React from "react";
import { useForm } from "react-hook-form";

export default function Page2(props) {
    const { handleSubmit, register } = useForm();

const handelInputChange = (e) => {
    const { name, value } = e.target;
    console.log(name, value);
};

const handleData = (data) => {
    console.log("data",data);
};

return (
    <>
        <Paper
            style={{ margin: "10px auto", textAlign: "center" }}
            elevation={24}  >
            <h1 style={{ textAlign: "center" }}>Todo Application</h1>
            <form onSubmit={handleSubmit(handleData)}>
                <Grid
                    style={{ margin: "10px" }}
                    container
                    spacing={1}
                    direction="column"  >
                    <Grid item xs={6}>
                        <TextField
                            name="title"
                            label="Title"
                            variant="standard"
                            inputRef={register} 
                            onChange={handelInputChange} />
                        <TextField
                            name="desc"
                            label="Description"
                            variant="standard"
                            inputRef={register}
                            onChange={handelInputChange} />
                        <TextField
                            name="priority"
                            type="number"
                            label="Priority"
                            variant="standard"
                            inputRef={register}
                            onChange={handelInputChange} />
                    </Grid>
                </Grid>
            <button type="submit" variant="contained" color="primary">
                Add
            </button>
            </form>    
        </Paper>
    </>
);
}

表单未在 React JS 中提交

Form is not submitting in react js

javascript

forms

reactjs

material-ui

react-forms