Question

我使用Material UI v1.0.0-beta23以及redux-form和redux-form-material-ui。我有一个类型编号的字段，我想在标签上设置最小值和最大值。我已经尝试过inputProps和min / max，但似乎都没有做我想做的事情。我查看了源代码，但没有看到明显的方法。有可能，如果可能，怎么样？

这是我的JSX展示了我尝试过的东西。

以下是DOM的样子：

set.seed(123)
dat <- data.frame(replicate(10,sample(0:50,1000,rep=TRUE)))

Answer 1

redux-form Field会将道具传递给组件：

所有其他道具将传递给组件道具生成的元素。

TextField有一个名为InputProps的属性，可用于将道具传递给它呈现的Input组件。如果您正在使用redux-form-material-ui，情况也是如此。它的TextField只是material-ui组件的包装器。

material-ui Input组件有一个属性名inputProps，可用于将props传递给它呈现的input元素。

好的，我该怎么办？

您需要一直传递道具，从Field到TextField，再到Input，再到input元素。

因此，如果我们在Field上设置InputProps，它将被传递给TextField，后者会将其传递给Input组件。如果我们传递的对象包含内部inputProps（故意小写＆＃39; i＆＃39;），则输入组件会将其传递给input元素。

热门游戏：

基本上，在inputProps中定义InputProps对象并将其应用于Field：

<Field
    name="maxNodeSelectedCount"
    component={TextField}
    label="Max Node Selected Count"
    type="number"
    InputProps={{ inputProps: { min: 0, max: 10 } }}
    format={formatOption}
    normalize={normalizeOption}
    {...propertyFieldDefaults}
  />

Field将InputProps传递给TextField
TextField将InputProps的内容传递给Input
输入将inputProps的内容传递给输入

有一点需要注意：

current implementation of TextField为inputProps设置了自己的值，以便将inputClassName应用于input元素。

通过将您自己的inputProps值传递给TextField，您将覆盖TextField应用的版本，并保留inputClassName未设置。如果使用inputClassName，则需要将其包含在内部inputProps对象中。

编辑：我在未来的版本中提交了issue和pull request来解决此警告。

Answer 2

只需很好地使用您的 inputprops

<TextField 
    type="number"
    InputProps={{
        inputProps: { 
            max: 100, min: 10 
        }
    }}
    label="what ever"
/>

注意inputprops中的大写和小写

//归功于Ken Gregory

Answer 3

其他答案对我不起作用。

材料UI包含用于第三方集成here

的部分

这确实是只写数字而不允许使用负数的工作。

import NumberFormat from 'react-number-format';

function NumberFormatCustom(props) {
    const { inputRef, onChange, ...other } = props;
    
     return (
            <NumberFormat
                {...other}
                getInputRef={inputRef}
                allowNegative={false}
                onValueChange={(values) => {
                    onChange({
                        target: {
                            name: props.name,
                            value: values.value,
                        },
                    });
                }}
                isNumericString
            />
        );
}
    
<TextField
    label="react-number-format"
    value={values.numberformat}
    onChange={handleChange}
    name="numberformat"
    id="formatted-numberformat-input"
    InputProps={{
          inputComponent: NumberFormatCustom,
     }}
/>

Answer 4

<TextField
            label="Username"
            id="outlined-start-adornment"
            variant="outlined"
            inputProps={{minlength:5, maxLength: 20}}
          />

Answer 5

您可以使用 inputProps 将任何属性应用于本机 input 元素，包括 min 和 max。

<TextField type="number" inputProps={{ min: 4, max: 10 }} />

Answer 6

这肯定有用

handleMobileNumber = (e) => {
 if (e.target.value.split("").length <= 10) {
  this.setState({
    mobileNumber: e.target.value,
  });
 }
};

<TextField
  label="Enter Mobile Number"
   variant="outlined"
   value={this.state.mobileNumber}
   onChange={this.handleMobileNumber}
   type="number"
/>

Answer 7

将 type 放在 InputProps 中：

      <Field
        name="number"
        label="Number"
        component={TextField}
        InputProps={{
          inputProps: {
            type: 'number',
            min: 0, max: 25,
          },
        }}
      />

在TextField上设置最小值/最大值类型=＆＃34;数字＆＃34;？

7 个答案: