【问题标题】:How to validate decimal with comma for Input onChangeText React Native?如何使用逗号为 Input onChangeText React Native 验证十进制?
【发布时间】:2020-07-15 08:32:01
【问题描述】:

我需要在TextInput(React Native)中验证带两位小数的数字,以防止插入第二个逗号。 现在我可以输入 123,12,23 并且它会破坏应用程序。

export default class Bottom extends Component {
  constructor(props){
    super(props)
    this.state = {
      sum:'',
    }
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(value) {
     // validation of the value
     this.setState({sum: value});
   }
 render () {
    return ( 
      <View>
       <TextInput 
        style={styles.input} 
        keyboardType ="decimal-pad"
        autoCorrect={false}
        placeholder='add'
        onChangeText={ this.handleInputChange }
        value={this.state.sum} 
       />
      </View> 
    );
  }

我尝试使用indexOf,但它删除了第一个逗号,而不是第二个

if (value.indexOf(',') === -1) {
 this.setState({sum: value});

任何建议或正确答案的链接?

更新

我已经解决了:

handleInputChange(value) {
    let lastValid = this.state.sum;
    //var validNumber = new RegExp(/^\d*\.?\d*$/); // for dot
    var validNumber = new RegExp(/^\d*\,?\d*$/); // for comma
      if (validNumber.test(value)) {
        lastValid = value;
      } else {
        value = this.state.sum;
      }
    this.setState({ sum: lastValid });
  }

沙盒也更新了

沙盒:https://codesandbox.io/s/unruffled-blackwell-208p6?file=/src/App.js

【问题讨论】:

    标签: javascript reactjs react-native validation


    【解决方案1】:

    我会这样做:将onKeyPress={this.handleKeyPress} 添加到您的TextInput,然后:

    
    handleKeyPress(evt) {
        evt = (evt) ? evt : window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode > 31 && ((charCode < 48 || charCode > 57) || charCode != 188)) {
            return false;
        }
        if (this.value.match(/,.*,/g) return false;
    
        return true;
    }
    
    

    【讨论】:

    • 什么意思?您的输入元素不接受此类值?
    • 我在上面添加了沙箱,你能检查一下吗?
    • 您必须删除&lt;input/&gt; 处的硬编码value={this.state.sum},这会导致锁定
    • 如果我删除它,它将如何验证输入?那就是我输入了 123,55,8899 ...我需要第二个逗号不允许输入。
    • 您的onChangeText() 将值传递给handleInputChange(),如果您明确设置输入的值,您将阻止它更改它的能力(这是输入字段的点)。好的,现在您已经阐明了您的期望 - 我会在一分钟内编辑我的答案(如果有帮助,请将其标记为正确答案)。
    猜你喜欢
    • 2021-05-27
    • 1970-01-01
    • 2021-07-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-08-22
    相关资源
    最近更新 更多