如何做出反应本机输入，以向用户提供验证状态反馈.[有效，Printine，错误，编辑] [英] How to make a react native input which gives validation state feedback to the user. [Valid, Printine, Error, Editing]

问题描述

我想输入的内容会随着用户的输入而不断更新，然后失去焦点.反馈将是输入周围的边框.

I would like to have an input that updates continuously as the user types and then loses focus. The feedback will be a border around the input.

1 Green: when valid
2 Amber: when typing and is in error state (Green when valid)
3 Red: when in error state and unfocused
4 Nothing: when input is pristine (not touched and empty)

实现此目标的最佳方法是什么?

What is the best way to achieve this?

理想情况下，这将同时适用于iOS和Android.

Ideally this will work with both iOS and Android.

推荐答案

TextInput具有两个对实现此目的有用的功能:

TextInput has two functions that will be useful to achieve this:

onBlur onChangeText

onBlur and onChangeText

要在TextInput上动态设置样式，可以为bordercolor附加一个变量，如下所示:

To dynamically set the style on the TextInput, you could attach a variable for the bordercolor like below:

<TextInput
  onBlur={ () => this.onBlur() }
  onChangeText={ (text) => this.onChange(text) }
  style={{ borderColor: this.state.inputBorder, height: 70, backgroundColor: "#ededed", borderWidth: 1 }} />

然后，将来自onChangeText函数的结果通过正则表达式或模式匹配器传递，以实现您想要实现的任何结果.

Then, pass the result from the onChangeText function through a regex or pattern matcher to achieve whatever result you are trying to achieve.

我在这里建立了一个工作项目，该项目检查是否存在空格，并引发您想要的错误.您可以对其进行编辑，使其更适合您的需求，但基本前提应相同.我还将下面的代码用于实现该功能的工作项目:

I've set up a working project here that checks if there is whitespace, and throws the errors you are wanting. You can take it and edit it to be more specific to your needs, but the basic premise should work the same. I've also put the code below for the working project that implements the functionality:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput
} = React;

var SampleApp = React.createClass({

  getInitialState: function() {
    return {
        inputBorder: '#eded',
      defaultVal: ''
    }
  },

  onBlur: function() {
    console.log('this.state.defaultVal', this.state.defaultVal)
    if(this.state.defaultVal.indexOf(' ') >= 0) {
        this.setState({
        inputBorder: 'red'
      })
    }
  },

  onChange: function(text) {
    this.setState({
        defaultVal: text
    })
    if(text.indexOf(' ') >= 0) {
        this.setState({
        inputBorder: '##FFC200'
      })
    } else {
        this.setState({
        inputBorder: 'green'
      })
    }
  },

  render: function() {
    return (
      <View style={styles.container}>
        <View style={{marginTop:100}}>
            <TextInput
            onBlur={ () => this.onBlur() }
            onChangeText={ (text) => this.onChange(text) }
            style={{ height: 70, backgroundColor: "#ededed", borderWidth: 1, borderColor: this.state.inputBorder }} />
        </View>
        <View style={{marginTop:30}}>
            <TextInput 
          style={{ height: 70, backgroundColor: "#ededed" }} />
        </View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,  
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

这篇关于如何做出反应本机输入，以向用户提供验证状态反馈.[有效，Printine，错误，编辑]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！