reactjs - 如何在类型为 ="number"的 TextInput 中仅输入整数值

Question

我想使用 material-UI TextInput 仅输入整数值(不是十进制值)。
我按如下方式使用了 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;
};