Question

需要帮助，我刚刚将material-ui文本字段放在本地反应中，我已设置：

keyboardType: {numeric}

它的工作正常，但当我输入30,000时它显示NaN我想在键盘中限制逗号（，）和点（。）。当我输入金额时，它将计算并以文本显示结果。

<TextField 
     onChange={(event)=>this.handle(event.nativeEvent.text)}
     label='Amount'
     value={this.state.amount}
     keyboardType = 'numeric'
     enablesReturnKeyAutomatically={true}>
</TextField>

Answer 1

显示的值始终为this.state.amount。因此，如果您更改该值以丢弃除数字之外的所有内容，则屏幕上只会显示数字。

你可以做的另一件事是将keyboardType更改为'number-pad'，但我不知道跨设备是怎样的。

使用以下内容......

<TextField 
     onChange={(event)=>this.handleChange(event.nativeEvent.text)}
     label='Amount'
     value={this.state.amount}
     keyboardType = 'number-pad'
     enablesReturnKeyAutomatically={true}>
</TextField>  

handleChange(event) {

    this.setState({amount: event.target.value.replace(/[^0-9]/g,'')});
}

Answer 2

试试这个：

由于您使用的是controlled component，表示将字段值存储在状态变量中，因此要限制用户输入输入,和.，请将检查放入{{1}方法，如果输入的值是整数，则只更新状态值，否则不会。

像这样：

onChange

反应原生textinput数字问题

2 个答案: