Question

我在TextInput组件的输入文本中添加了一些验证。 TextInput的值在状态下处理，仅在输入的值有效时更新。

我的代码看起来像这样：

class TextInputWithValidation extends Component {

  constructor(props) {
    super(props);
    this.state = { text: ''}
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(text) {
    if(isValid) {
        this.setState({text})
    }
  }

  render() {
    return (
            <TextInput
                value={this.state.text}
                onChangeText={this.handleChange}
            />
    )
  }
}

问题是当向TextInput输入无效字符时，非有效文本会出现一秒钟而消失 - 这会导致不必要的闪烁。

任何想法如何解决这个问题？

Answer 1

根据你的评论，解决方法可能是使用你的handleChange方法来检测小数点，然后简单地将某种inputLengthState设置为小数的当前位置

然后你可以使用prop作为文本输入maxLength = this.state.inputLengthState + this.state.precision，精确度是你的小数位。我写了一些基本代码

class TextInputWithValidation extends Component {

  constructor(props) {
    super(props);
    this.state = { 
       text: '',
       precision: 2,
       inputLength: 100,
    }
    this.handleChange = this.handleChange.bind(this);
  }

 handleChange(text) {
   if(isValid) {
     this.setState({text})
   }
   //somewhere here you would check text for a decimal place
   //and then set the inputLength the decimals' string index. If null,
   //set it to some limit however you would like ( i used 100 ).
 }

render() {
    return (
        <TextInput
            value={this.state.text}
            maxLength={this.state.inputLength + this.state.precision}
            onChangeText={(text) => {this.handleChange(text)}}
        />
    )
}

}

道歉，如果我的代码在语法方面有点偏差，那已经有一段时间了。对于检查小数位的算法，我确定这应该是非常简单的。如果没有，请说。

Answer 2

您可以尝试使用＆＃39; =＆gt;＆＃39;操作

class TextInputWithValidation extends Component {

constructor(props) {
  super(props);
  this.state = { text: ''}
  this.handleChange = this.handleChange.bind(this);
}
//here
handleChange = (text) => {
  if(isValid) {
      this.setState({text})
  }
}

render() {
  return (
          <TextInput
              value={this.state.text}
              //and here
              onChangeText={() => this.handleChange}
          />
  )
}
}

React Native - 使用状态时文本输入闪烁

2 个答案: