使用最终表格材料用户界面设置数字输入的最小值和最大值

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"
       />