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

Question

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

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

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

{
    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 });
};

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

Initializing and setting Material UI TextField state as a number

reactjs

graphql-js