'onChange' 被多次指定，所以这个用法将被覆盖

Question

我正在学习 ReactJs ...我想用 React Hook Form、Material Ui 和 TypeScript 设计一个表单（比如 Linkedin 中的 Section Exprience）。

我在处理此文本时遇到错误：'onChange' 被指定了多次，因此此用法将被覆盖。

我在 onChange 中的功能不起作用。我想注册 react hook 表单。我该如何解决这个错误？

import Typography from "@mui/material/Typography";
import TextField from "@mui/material/TextField";
import Box from "@mui/material/Box";
import { React, useState } from "react";
import { useForm, SubmitHandler } from "react-hook-form";
import Divider from "@mui/material/Divider";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import InputLabel from "@mui/material/InputLabel";

// React Hook Form Types
type Inputs = {
  title: string;
  employment: string;
  company: string;
  location: string;
  startDate: string;
  endDate: string;
  description: string;
};

function ExprienceCreate() {
  const [employment, setEmployment] = useState("");

  // React Hook Form
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<Inputs>();

  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);

  // Function For Employment Type Select
  const handleChange = (event: SelectChangeEvent) => {
    setEmployment(event.target.value as string);
    console.log(employment);
  };

  console.log(watch("title")); // watch input value by passing the name of it

  return (
    <Box
      sx={{
        width: "414px",
        border: "1px solid #000",
        p: 2,
        borderRadius: 1,
        margin: "16px auto",
      }}
    >
      <form onSubmit={handleSubmit(onSubmit)}>
        <Typography sx={{ my: "12px" }}>Title:</Typography>
        <TextField
          placeholder="Ex: Sales Manager"
          fullWidth
          {...register("title")}
          sx={{ mb: 2 }}
        ></TextField>
        <Divider />
        <Typography sx={{ my: "12px" }}>Employment type:</Typography>
        <InputLabel id="demo-simple-select-label">Employment Type</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={employment}
          label="Employment Type"
          onChange={handleChange}
          {...register("employment")}
          sx={{ mb: 2, width: "100%" }}
        >
          <MenuItem value={"full"}>FullTime</MenuItem>
          <MenuItem value={"part"}>PartTime</MenuItem>
        </Select>
        <Divider />
        <Typography sx={{ my: "12px" }}>Company name:</Typography>
        <TextField
          placeholder="Ex: Microsoft"
          fullWidth
          {...register("company")}
          sx={{ mb: 2 }}
        ></TextField>
        <Divider />
        <Typography sx={{ my: "12px" }}>Location:</Typography>
        <TextField
          placeholder="Ex: London, United Kingdom"
          fullWidth
          {...register("location")}
          sx={{ mb: 2 }}
        ></TextField>
        <Divider />
        <Typography sx={{ my: "12px" }}>Date:</Typography>
        <TextField
          placeholder="Ex: Sales Manager"
          fullWidth
          {...register("startDate")}
          sx={{ mb: 2 }}
        ></TextField>
        <TextField
          placeholder="Ex: Sales Manager"
          fullWidth
          {...register("endDate")}
          sx={{ mb: 2 }}
        ></TextField>
        <Divider />
        <Typography sx={{ my: "12px" }}>Description:</Typography>
        <TextField
          fullWidth
          {...register("description")}
          sx={{ mb: 2 }}
        ></TextField>
      </form>
    </Box>
  );
}

export default ExprienceCreate;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

register 可能会覆盖您指定的 onChange。尝试交换 onChange 和 register.

的顺序

    <Select
      labelId="demo-simple-select-label"
      id="demo-simple-select"
      value={employment}
      label="Employment Type"
      {...register("employment")}
      onChange={handleChange}
      sx={{ mb: 2, width: "100%" }}
    >

Answer 2

不幸的是，Anastasia 的回答不正确，因为这样你会覆盖 react-hook-form 的 onChange - 所以这会阻止更新它的内部表单状态，因此当前值不会在您的 onSubmit 回调中可用。

如果您需要为 register 设置一个 onChange 回调，您可以在配置选项中提供一个回调，您可以传递第二个参数。查看 docs 了解更多信息。

但我想此处不需要“就业”字段的 useState，因为您可以在 onSubmit 回调中访问当前值。如果您需要在提交之前访问它，那么您可以像使用“标题”字段一样使用 watch。

使用 onChange 配置选项

<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  label="Employment Type"
  {...register("employment", { onChange: handleChange })}
  sx={{ mb: 2, width: "100%" }}
>

使用watch

const employment = watch('employment');

<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  label="Employment Type"
  {...register("employment")}
  sx={{ mb: 2, width: "100%" }}
>

'onChange' 被多次指定，所以这个用法将被覆盖

'onChange' is specified more than once, so this usage will be overwritten

reactjs

typescript

forms

react-hook-form