首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Handling Text Input

TextInput是允许用户输入文本的基本组件。它有一个onChangeText道具,它在每次文本改变onSubmitEditing时都会调用一个函数,并在提交文本时使用一个支持调用函数的道具。

例如,假设用户键入的内容是将他们的单词翻译为不同的语言。在这种新语言中,每一个单词都以相同的方式写成:?。所以句子“你好,鲍勃”将被翻译为“???”。

代码语言:javascript
复制
import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';

export default class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '?').join(' ')}
        </Text>
      </View>
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => PizzaTranslator);

在这个例子中,我们存储text在状态中,因为它随时间而变化。

对于文本输入你可能想要做更多的事情。例如,您可以在用户输入时验证里面的文本。有关更详细的示例,请参阅受控组件上React文档或TextInput的参考文档。

文本输入是用户与应用交互的方式之一。接下来,让我们看看另一种输入类型,并学习如何处理触摸。

扫码关注腾讯云开发者

领取腾讯云代金券