时间戳

首页 > 解决方案 > React Native 设置输入焦点

react-native - React Native 设置输入焦点

问题描述

如何在本机反应中将焦点设置为输入？

我的代码中有一些输入：

<Input
   value={CompName}
   onChangeText={(text) => this.onChangeText(text, 'CompName')}
   style={styles.valueText}
/>
<Input
   value={Phone}
   onChangeText={(text) => this.onChangeText(text, 'Phone')}
   style={styles.valueText}
/>
...

我验证它是否为空。如果为空，我会设置一条警报消息，我想专注于该领域。我该怎么做？

myFunc = () => {
  if(CompName === '' || CompName === undefined){
     Alert.alert('Company Name is required.');
     // set focus here??
     return;
  }
  ...
}

谢谢

标签： react-native

解决方案

首先，在 react-native 中，它是TextInput. 这是通过本机元素公开的两种方法。它们是 .focus() 和 .blur() ，它们将以编程方式聚焦或模糊 TextInput。

要使用它，您必须为TextInput.

<TextInput
   value={this.state.compName}
   onChangeText={(text) => this.onChangeText(text, 'CompName')}
   style={styles.valueText}
   ref={(input) => { this.compNameInput = input; }}
/>
myFunc = () => {
  if(this.state.compName === '' || this.state.comNam === undefined){
     Alert.alert('Company Name is required.');
     // set focus here??
     this.compNameInput.focus();
     return;
  }
  ...
}

我建议将状态用于compName，例如this.state.compName

推荐阅读