在 TextField type = “ number”上设置 min/max？

The redux-form Field will pass props through to the component:

All other props will be passed along to the element generated by the component prop.

The TextField has a property named InputProps which can be used to pass props to the Input component it renders. This is also true if you're using redux-form-material-ui. Its TextField is simply a wrapper for the material-ui component.

The material-ui Input component has a property named inputProps which can be used to pass props to the input element it renders.

Ok, so what do I do?

You need to pass props all the way through, from Field, to TextField, to Input, to the input element.

So if we set InputProps on Field, it will be passed to TextField, which will pass it to the Input component. If the object we pass contains an inner inputProps (intentional lowercase 'i'), the Input component will pass it to the input element.

A game of hot-proptato:

Basically, define an inputProps object within InputProps and apply it to 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 passes InputProps to TextField
• TextField passes the contents of InputProps to the Input component
• Input passed the contents of inputProps to the input element

There is a caveat with this:

The current implementation of TextField sets its own value for inputProps so that the inputClassName is applied to the input element.

By handing your own value of inputProps to TextField, you will overwrite the version applied by TextField, leaving inputClassName unset. If are using inputClassName you will need to include it in the inner inputProps object.

EDIT: I have submitted an issue and pull request to address this caveat in a future release.

Simply use your inputprops well

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

notice the upper and lower case in the inputprops

credit to Ken Gregory

The other answers didn't work for me.

Material UI has a section for 3rd party integration here

It really does the job of writing only numbers and not allowing negatives.

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,
}}
/>

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

You can use inputProps to apply any attributes to the native input element, including min and max.

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

Please note that the min/max attributes do not prevent the user from typing invalid values in the TextField. To restrict what the user can type, you can validate the value by adding onChange handler like below:

const min = 0;
const max = 10;


export default function BasicTextFields() {
const [value, setValue] = useState<number>();


return (
<div>
<TextField
type="number"
inputProps=\{\{ min, max }}
value={value}
onChange={(e) => {
var value = parseInt(e.target.value, 10);


if (value > max) value = max;
if (value < min) value = min;


setValue(value);
}}
/>
</div>
);
}

This will definitely work

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

Put type inside InputProps:

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

I had the same issue, in my case I wanted to prevent the user from adding very big or minus numbers in a MUI Textfield used for minutes or hours inputs.

My solution is the following:
In the MUI TextField

  <TextField
type={'number'}
helperText={'minutes'}
defaultValue={minutes}
onChange={(e) => { checkMinutesValidity(e) }}
/>

In the checkMinutesValidity function

  const checkMinutesValidity = (event) => {
if(event.target.value > 59){
event.target.value = 59;
}
if(event.target.value < 0){
event.target.value = 0;
}
}

Hope it helps.