Question

如何在react native中将焦点设置为Input？

我的代码中有一些输入内容：

<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;
  }
  ...
}

谢谢

Answer 1

首先，在本机语言中，它是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

反应本机设置输入焦点

1 个答案: