将 Material UI TextField 状态初始化和设置为数字

Question

我正在开发一个锻炼记录器，用户可以在其中记录他们的锻炼组。我正在为这个项目使用 MERNG 堆栈。目前，我正在验证在前端记录一组。这将向用户询问这些：练习名称（字符串）、重量（浮点数）、代表次数（整数）和注释（字符串 - 可选）。我遇到的问题是初始化和设置重量和代表他们尊重的类型。这是我为这些字段设置的初始状态：

{
    exerciseName: "",
    weight: "", 
    reps: "",
    notes: "",
}

我意识到这会将重量和代表作为字符串返回，所以我也尝试了这个（尽管我不希望字段已经为他们输入了重量和代表，以防他们忘记自己输入这些并将其添加到他们的日志中）。

{
    exerciseName: "",
    weight: 0,
    reps: 0,
    notes: "",
  }

这种方法在一定程度上有效，因为控制台将它们记录为数字，但是当用户在 TextField（Material UI）中更改它时，它们最终还是以字符串形式提交。因此，我从后端收到了 400 状态码，因为它们应该是 Float 和 Int。我怎样才能实现将这些值初始化和设置为数字的结果，所以不会触发错误？

表格

const [errors, setErrors] = useState({}); 

const { onChange, onSubmit, values } = useForm(registerSet, { // Uses a hook for forms
    exerciseName: "",
    weight: "",
    reps: "",
    notes: "",
});

return (
  <form
    onSubmit={onSubmit}
    id="addSetForm"
    noValidate
    autoComplete="off"
  >
    <TextField
      name="exerciseName"
      label="Exercise Name"
      variant="outlined"
      fullWidth
      select
      className={classes.formInput}
      value={values.exerciseName}
      error={errors.exerciseName ? true : false}
      onChange={onChange}
    >
      <MenuItem key="Bench Press" value="Bench Press">
        Bench Press
      </MenuItem>

      <MenuItem key="Deadlift" value="Deadlift">
        Deadlift
      </MenuItem>

      <MenuItem key="Squat" value="Squat">
        Squat
      </MenuItem>
    </TextField>

    <Grid container spacing={1} className={classes.formInput}>
      <Grid item xs={6}>
        <TextField
          name="weight"
          label="Weight"
          type="number"
          variant="outlined"
          fullWidth
          value={values.weight}
          error={errors.weight ? true : false}
          onChange={onChange}
        />
      </Grid>

      <Grid item xs={6}>
        <TextField
          name="reps"
          label="Reps"
          type="number"
          variant="outlined"
          fullWidth
          value={values.reps}
          error={errors.reps ? true : false}
          onChange={onChange}
        />
      </Grid>
    </Grid>
  </form>
)

formHooks.js (useForm)

export const useForm = (callback, initialState = {}) => {
    const [values, setValues] = useState(initialState);

    const onChange = (event) => {
        setValues({ ...values, [event.target.name]: event.target.value });
    };

    const onSubmit = (event) => {
        event.preventDefault();
        callback();
    };

    return {
        onChange,
        onSubmit,
        values
    };
};

Answer 1

您需要更改onChange 函数。如果你是console.log(typeof event.target.value)，它将是string。

const onChange = (event) => {
    setValues({ ...values, [event.target.name]: e.target.type === 'number' ? parseInt(e.target.value) : e.target.value });
};