ReactJS为使用最终表单材料ui输入的数字设置最小值和最大值

Question

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

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

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

但它不起作用。

此外，我想为preparation_time添加秒，因此格式为00:00:00。

代码沙盒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"
/>