文本字段失去对每个输入的焦点

Question

我是网络开发新手，并且我已经被这个问题困扰了很长一段时间。我迫切需要一个简单的解决方案的帮助。问题是组件内部的

Textfield

在每次按键时都会失去焦点。我在某处读到，将

PersonalInfoStep

移到父组件之外可以解决这个问题，但它为我打开了一个新的麻烦。如果可能的话，只是寻找快速解决方案（例如，可能删除

PersonalInfoStep

中的

onChange

但仍传递

Textfield

中的

Textfield

值）。我删除了大部分代码并隔离了我需要帮助的组件：

submitForm

我尝试从文本字段中删除 

import React from "react";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import {
  Button,
  FormControl,
  TextField,
  InputLabel,
  Select,
  MenuItem,
  Box,
} from "@mui/material";
import { useAuth } from "../utils/AuthProvider.jsx";
import dayjs from "dayjs";

const CreateProgram = () => {
  const { user } = useAuth();
  const navigate = useNavigate();
  const [birthday, setBirthday] = useState(null);
  const [weight, setWeight] = useState(null);
  const [weightUnit, setWeightUnit] = useState("lbs");

  function PersonalInfoStep() {
    return (
      <FormControl>
        <Box>
          <LocalizationProvider dateAdapter={AdapterDayjs}>
            <DatePicker
              label="Birthday"
              value={birthday ? dayjs(birthday) : null}
              fullWidth
              onChange={(newValue) => {
                setBirthday(dayjs(newValue).format("YYYY-MM-DD"));
              }}
              renderInput={(params) => <TextField {...params} />}
            />
          </LocalizationProvider>
        </Box>
        <Box>
          <TextField
            type="number"
            value={weight}
            onChange={(e) => setWeight(e.target.value)}
            label="Weight"
            variant="outlined"
            fullWidth
          />
        </Box>
        <Box>
          <FormControl variant="outlined" fullWidth>
            <InputLabel id="weight-unit-label">Unit</InputLabel>
            <Select
              labelId="weight-unit-label"
              value={weightUnit}
              onChange={(e) => setWeightUnit(e.target.value)}
              label="Unit"
            >
              <MenuItem value="lbs">Lbs</MenuItem>
              <MenuItem value="kg">Kg</MenuItem>
            </Select>
          </FormControl>
        </Box>
      </FormControl>
    );
  }

  async function submitForm() {
    const formResponse = {
      birthday: birthday,
      weight: weight,
      weight_unit: weightUnit,
    };
    if (user) {
      navigate("/training", {
        state: { userResponses: formResponse },
      });
    } else {
      navigate("/signup", { state: { userResponses: formResponse } });
    }
  }
  return (
    <Box>
      <form
        method="post"
        action="#"
        className="createProgramForm"
        onSubmit={(e) => {
          e.preventDefault();
          submitForm();
        }}
      >
        <PersonalInfoStep />
        <Button variant="contained" onClick={() => submitForm()}>
          Submit
        </Button>
      </form>
    </Box>
  );
};

export default CreateProgram;

以使其保持焦点，但是当然，没有为

onChange={(e) => setWeight(e.target.value)}

和

weight

传递任何值。我尝试了其他解决方案，但它弄乱了weight_unit下拉列表并导致文本字段值重置。我还在文本字段中添加了

weightUnit

，但也没有帮助。

Answer 1

key="weight"

创建一个新的函数引用。这会导致 React 在前一个槽中看到不同的组件，因此状态丢失。