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

【问题标题】：ReactJS set min and max value for number input using final-form-material-uiReactJS 使用 final-form-material-ui 设置数字输入的最小值和最大值
【发布时间】：2021-06-04 16:01:27
【问题描述】：

我正在使用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

【问题讨论】：

标签： reactjs material-ui react-final-form final-form

【解决方案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"
       />

【讨论】：