如何在 type= "number" 的文本输入中仅输入整数值

Question

我想使用material-UI TextInput只输入整数值(而不是十进制值(。 我按如下方式使用了文本输入，但它仍然允许十进制数。

我该怎么做？

<TextField id="outlined-value" 
type="number"
label="Value" 
className={classes.standartInputMargin}
value={this.state.allowedValue}
margin="normal" 
variant="outlined"
onChange={(event) => Number.isInteger(event.target.value) 
? this.setState({ allowedValue: event.target.value }) 
: null} />

Answer 1

您将原始值传递给setState，而不是整数值。由于您的输入仅接受数字，因此您可以只检查小数位。

onChange = (e) => {
const { value } = e.target;
if (value.match('.')) { 
this.setState({ value: parseInt(value) })
} 
return null;
}

或者，如果您只有一个常规输入，则此类输入仅允许您输入整数。

onChange = e => {
const { value } = e.target;
const parsedInt = parseInt(value);
if (parsedInt) {
this.setState({ value: parsedInt });
}
return null;
};

Answer 2

const setValueHandler = (e) => {
setValue(e.target.value.replace(/[^0-9]/g, ''));
}

Answer 3

我认为最简单的方法是在onChange方法中解析值。

const NON_DIGIT = '/[^d]/g';
...
onChange(event) {
const { value } = event.target;
const intValue = parseInt(value.toString().replace(NON_DIGIT, ''));
this.setState({ value: intValue });
}