ReactJS 使用 final-form-material-ui 设置数字输入的最小值和最大值

Question

我正在使用 final-form 和 final-form-material-ui

我想为数字输入设置最小值和最大值。已经试过

InputProps={{ inputProps: { min: 0, max: 10 } }}

但是没用。

我还想为 preparation_time 添加秒数，因此格式为 00:00:00.

codesandbox https://codesandbox.io/s/fast-brook-g3488?file=/src/App.js

Answer 1

使用文档： https://final-form.org/docs/react-final-form/examples/field-level-validation

沙盒演示：https://codesandbox.io/s/wizardly-paper-2dtwf?file=/src/App.js:3139-3391

以这种方式编写您的验证：

const minValue = (min) => (value) =>
  isNaN(value) || value >= min ? undefined : `Should be greater than ${min}`;

const composeValidators = (...validators) => (value) =>
  validators.reduce((error, validator) => error || validator(value), undefined);

然后以这种方式使用验证：

 <Field
       name="no_of_slices"
       component={TextField}
       type="number"
       validate={composeValidators(minValue(18))}
       label="Number of slices"
       />

ReactJS 使用 final-form-material-ui 设置数字输入的最小值和最大值

ReactJS set min and max value for number input using final-form-material-ui

reactjs

material-ui

final-form

react-final-form