'onChange'被多次指定，所以這個用法會被覆寫

我正在學習 ReactJs ...我想設計一個帶有 React Hook 表單、Material Ui 和 TypeScript 的表單（如 Linkedin 中的部分體驗）。

我遇到了這個文本的錯誤：“onChange”被指定了不止一次，所以這個用法將被覆寫。

我在 onChange 中的功能不起作用。我想用反應鉤子形式注冊。我該如何解決這個錯誤？

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>

uj5u.com熱心網友回復：

不幸的是，Anastasia 的回答是不正確的，因為這樣你會覆寫react-hook-form's - 所以這會阻止更新它的內部表單狀態，因此當前值在你的回呼onChange中將不可用。onSubmit

如果你需要一個onChange回呼，register你可以在配置選項中提供一個回呼，你可以傳遞第二個引數。檢查檔案以獲取更多資訊。

但我猜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%" }}
>

uj5u.com熱心網友回復：

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%" }}
    >

標籤：反应 打字稿 形式 反应挂钩形式

上一篇：使用yup驗證后重定向到下一頁

下一篇：如何根據選擇選項的值更改復選框的值？