Question

我想使用material-ui TextInput仅输入整数值（而不输入十进制值）。我按如下方式使用TextInput，但它仍然允许十进制数。

我该怎么做？

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

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

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

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

    this.setState({ value: intValue });
}

Answer 3

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

如何在TextInput中仅输入一个带有type =“ number”的整数值

3 个答案: