【问题标题】: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-formfinal-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"
           />
    

    【讨论】:

      猜你喜欢
      • 2017-12-25
      • 2014-09-08
      • 1970-01-01
      • 2021-03-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多