如何在react native中单击按钮时关注TextInput
在React Native中，当用户单击按钮时关注TextInput，可以通过以下步骤实现：
- 首先，确保你已经安装了React Native的开发环境，并创建了一个新的React Native项目。
- 在你的项目中，找到需要关注的TextInput组件，并为其添加一个ref属性，以便在代码中引用它。例如：
<TextInput ref={(input) => { this.textInput = input; }} />- 在你的按钮组件中，添加一个onPress事件处理程序，并在其中调用TextInput组件的focus()方法。这将使TextInput组件获得焦点。例如：
<Button onPress={() => { this.textInput.focus(); }} title="关注TextInput" />- 现在，当用户单击按钮时，TextInput组件将获得焦点，并弹出键盘以便用户输入。
这是一个简单的示例，演示了如何在React Native中实现单击按钮时关注TextInput。根据你的具体需求，你可以根据React Native的文档和API进一步定制和扩展这个功能。
腾讯云相关产品和产品介绍链接地址：
相关·内容
如何通过单击按钮在React Native中添加文本输入？例如，我会按下"+“按钮，它会在视图的底部添加一个文本输入。
编辑:这是我的代码(删除了所有不相关的东西)。因为某些原因不能工作。单击该按钮不会执行任何操作。
import React, { Component, PropTypes } from 'react';
import { StyleSheet,NavigatorIOS, Text, TextInput, View, Button,
TouchableHighlight, TouchableOpacity, S
浏览 0提问于2017-07-31得票数 1
我正在使用wix/react-native-calendars.的Agenda在我的容器中，我有一个按钮，点击它打开Modal和一个来自本地纸的TextInput。当我单击键盘打开时的按钮时，按钮的onPress()不起作用，但当我第二次按下按钮时，它正常工作，同时键盘也在touch.How外部被排除，以使按钮的onPress()在第一次单击时工作？
import React, { useEffect,useState, useRef } from 'react'
import {
StyleSheet, Modal, Pressable,
TouchableO
浏览 6提问于2021-03-22得票数 0
在我的反应-本地应用..。它有一个从react-native-modal.导入的模式在Modal内部有一个TextInput字段。当我将注意力集中到textInput中时，默认情况下会打开键盘，但当我尝试单击“保存按钮”时，在TextInput中输入文本后，将无法单击“保存”按钮。首先是关闭键盘，然后才能点击保存按钮。请有人在这个问题上提供帮助吗？
浏览 2提问于2020-05-04得票数 0
2回答
我正在开发React Native，我是一个初学者，如果我的问题特别简单的话，我很抱歉。
我目前在一个视图(Home.Js)中工作，而不是在App.Js中。在这个Home视图中，我有一个文本输入(用户名)，我想要获取用户单击按钮时输入的值。我看了解释视频，但他们解释了如何在App.Js中实现它，当我在我的视图中实现它时，它不起作用。这是我的代码。谢谢
#Here We Are in my Home View (Home.Js) not App.Js
import React from 'react';
import { Image, ImageBackground, Sty
浏览 2提问于2020-11-17得票数 0
<TextInput
// ...
returnKeyType = {"next"}
returnKeyType='go'
/>
这段代码
没有引导“转到”/“下一步”输入字段如何在iOS中向键盘添加“下一步”和“上一步”箭头。并设置键盘上的"return"/" next“按钮，将用户带到react native中的下一个字段。
浏览 7提问于2021-05-18得票数 0
1回答
我在ScrollView中有一个很大的表单，keyBoardShouldPersistTaps设置为"handled"，并且保存在TextInput中调用onBlur时输入到Global中的值( onChangeText保存到每个组件中的本地状态，以便具有更高的性能)。
当我的用户提交表单时，如果他们单击submit按钮，同时仍有文本输入(其中包含值)，则会运行submit调用，而不需要按submit按钮时焦点中的文本输入值。
所有其他文本输入中的所有其他值都正确提交，因为状态有时间正确更新。
如何确保在调用submit函数之前更新onBlur和useState (我知道这是异
浏览 0提问于2020-10-10得票数 0
回答已采纳
在下面的代码中，当您单击该按钮时，将弹出警报并关闭键盘。有没有一种方法可以在React Native中发出警报而不关闭键盘？ https://snack.expo.io/Hywcjv7WL import * as React from "react";
import { Alert, TextInput, View, Button, StyleSheet } from "react-native";
export default class App extends React.Component {
render() {
return (
浏览 41提问于2020-01-21得票数 0
回答已采纳
import React, { Component } from 'react';
import { Text, View, TextInput, Button, Alert } from 'react-native';
import datum from './data';
export default class Signup extends React.Component {
constructor(props) {
super(props);
this.state = { name: 'sff',
浏览 0提问于2019-04-09得票数 1
回答已采纳
我刚接触React Native，对js并不熟悉。
我想让程序显示我在按下Button时用TextInput写的内容(在Button下面有一个Text )。我想也许我应该设置两个状态:将state1 text作为Text输入，并将state2 mimin作为按钮输入，以及当按钮pressed时，将state2 mimin设置为state1 text。
我试过使用下面的代码，但当我单击Button时，它会显示红色页面。
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
浏览 0提问于2016-11-10得票数 6
回答已采纳
在下面的简化示例中，用户使用TextInput更新标签状态，然后单击标题中的“保存”按钮。在submit函数中，当请求label状态时，它返回原始值'‘，而不是更新的值。
要修复此问题，需要对导航headerRight按钮进行哪些更改？
注意:当Save按钮在呈现视图中时，一切都按预期的方式工作，而不是当它在标题中时。
import React, {useState, useLayoutEffect} from 'react';
import { TouchableWithoutFeedback, View, Text, TextInput } from 're
浏览 0提问于2020-06-07得票数 3
回答已采纳
我正在使用React Navigationv5的setOptions应用程序接口来定制我的标题按钮，并访问功能组件中的函数： import React, { useState, useLayoutEffect } from 'react';
import { View, TouchableOpacity, TextInput } from 'react-native';
export default ({ navigation }) => {
const [text, setText] = useState('initialValue
浏览 28提问于2020-06-14得票数 1
回答已采纳
我想导航到一个新的网页，当电子邮件和密码是正确的(当单击按钮)。
当单击“i”按钮时，如果电子邮件和密码正确，我想检查API并导航到另一个页面。
这里我使用AXIOS进行API集成。
-这是我的密码
import React, {useState} from 'react';
import {View,Text, TextInput, Button} from 'react-native';
import axios from 'axios';
import { useNavigation } from '@react
浏览 6提问于2021-04-06得票数 1
回答已采纳
1回答
我在React Native中渲染另一个视图时遇到了问题。
目前，我正试图在单击按钮时显示另一个视图(渲染另一个视图)。下面是我的React原生代码：
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
View,
Text,
ScrollView,
Image,
TextInput,
Button
} = React;
var Button = require('./node
浏览 0提问于2016-03-24得票数 0
如何使用react native以编程方式显示TextInput键盘？使用ScrollView时，在TextInput之间轻敲会导致键盘断开。我想使用TextInput的onFocus方法再次显示键盘。不管怎么说，要做到这一点？
浏览 3提问于2016-08-17得票数 9
回答已采纳
我是react-native的新手，通过遵循文档，我已经创建了一个简单的登录屏幕。现在我不知道如何在单击submit按钮时验证输入字段。以下是登录屏幕的代码。
import React, { Component } from 'react';
import {
AppRegistry,
Text,
Image,
View,
Button,
StyleSheet,
TextInput,
Linking,
Alert
} from 'react-native';
class LoginPage extends Component
浏览 2提问于2017-03-22得票数 1
回答已采纳
2回答
我想知道如何从组件中获得数据，当单击ReactiveNative中的按钮并将其传递给其他组件时。这是我的代码：
这是我的输入组件：
ZipInput.js
import React from 'react';
import { TextInput } from 'react-native';
import styles from './../assets/style';
export default class ZipInput extends React.Component {
constructor(props) {
sup
浏览 0提问于2018-01-29得票数 4
5回答
我将react-native与react-native-paper结合使用。
我有以下代码：
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { Button, TextInput } from 'react-native-paper';
export default class Header extends Component {
state = {
text: ''
浏览 1提问于2019-02-25得票数 2
回答已采纳
我正在学习react-native编程，我的下面的程序工作良好，如果我删除按钮，当我添加按钮时，它会给出一个错误。
import React from 'react';
import {
registerComponent,
} from 'react-native-playground';
import {
StatusBar,
StyleSheet,
Text,
View,
TextInput,
Alert,
Button
} from 'react-native';
class TextInputDemo
浏览 1提问于2016-12-14得票数 0
在我的React Native应用程序中，将有许多TextInputs，当用户按下return按钮时，我希望react专注于下一个TextInput。以前的堆栈溢出线程建议使用ref，但仅有2个TextInputs的示例。比方说，创建30+引用和处理聚焦的最有效方法是什么？ React Native 0.59w/常规旧js。
浏览 20提问于2019-04-17得票数 0
1回答
初学者在这里提出问题，不确定具体会考虑什么，但我正在尝试创建一个表单，用户可以在按下按钮时添加和删除输入行。当按下“添加”或“删除”按钮时，需要更改什么来呈现新组件或删除组件？现在，Add和Remove按钮适当地更改了textInput数组，但实际上并没有添加或删除组件。
以下是我的当前代码：
FormScreen.js
import React from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';
import { Button, Caption } from &#
浏览 1提问于2022-01-13得票数 0
回答已采纳
我已经在中创建了动态表单--React本机，如果用户单击该按钮，它将在按钮上方添加新表单。用户点击按钮的时间，它会添加那么多的表单。我已经做到了，但我面临的问题，在文本更改。
问题是，当我开始输入表单时，它首先显示秒的分数值，然后变为空值。
下面的是我尝试过的代码
import React, { PureComponent } from 'react'
import {
Text,
View,
TextInput
} from 'react-native'
import { TouchableOpacity } from '
浏览 2提问于2019-08-07得票数 1
我已经创建了一个示例react-native应用程序。此应用程序仅包含TextInput和一个按钮
export default class App extends Component {
state = {
inputValue: "You can change me!"
};
_handleTextChange = inputValue => {
this.setState({ inputValue });
};
_handleSelectionChange = (event) =>{
this.setState(
浏览 1提问于2017-04-11得票数 7
1回答
我是新的React本机&我正在尝试创建分离的Button组件文件(可重用的组件)，当我按下按钮时，它将导航到另一个页面(react导航)。下面是我的代码：
GlobalButton.js
import React from 'react'
import { StyleSheet, TouchableOpacity, Text} from 'react-native'
import { useNavigation, NavigationContainer } from '@react-navigation/native';
cons
浏览 1提问于2020-06-12得票数 0
回答已采纳
我需要你的帮助。当我按下按钮时，我想检查一下我的textInput是否有一个空的字段。因为现在我的应用程序可以用空字段将用户路由到目标页面。所以我需要在空的时候检查这个字段。但我不知道该怎么做。如果你帮我，我会很高兴的。
这是我的组件
import React, { Component } from 'react'
import { View, TextInput } from 'react-native'
import { MyButton, ErrorMessage } from '../uikit'
import { FormStyle,
浏览 1提问于2021-06-30得票数 0
回答已采纳
我正在使用react native构建一个移动应用程序。我正在使用react-native- navigator库中的堆栈导航器。
堆栈有两个屏幕，第一个屏幕ItemsListScreen显示带有add按钮的项目列表，单击add按钮导航到第二个屏幕AddItemScreen，其中显示带有保存按钮的项目的一些输入。单击保存按钮将导航回列表屏幕。
项目当前保存在本地SQLite数据库上，但将来将保存在服务器上。
ItemsListScreen.js
import React, { useEffect, useState, useContext } from "react";
imp
浏览 11提问于2020-08-01得票数 0
回答已采纳
我已经在根组件(App.js)中定义了所有的路由/导航，并试图通过单击按钮从子组件(LoginScreen)访问其中一个屏幕(UserScreen)。
这是我的App.js
import React from 'react';
import { StyleSheet, Text, View, TextInput, TouchableHighlight, Button } from 'react-native';
import LoginComponent from './components/LoginComponent';
import { S
浏览 0提问于2018-03-10得票数 1
回答已采纳
我定义了属性_navigateToRegister，但当我按下按钮时，什么也没有发生。我还有这个错误警告:警告:失败的道具类型道具"onPress“在”按钮“中被标记为”required“，但它的值是"undefined”错误在哪里？
app.js
import React, { Component } from 'react';
import {
AppRegistry
} from 'react-native';
import {
StackNavigator,
} from 'react-navigation';
impor
浏览 1提问于2018-06-14得票数 0
React Native具有用于AutoExpandingTextInput的文档：
问题是:当以编程方式更改AutoExpandingTextInput的内容时，高度永远不会改变。
例如：
componentWillReceiveProps(props) {
this.setState({
richText: this._addHighlights(props.richText)
});
}
//
<AutoExpandingTextInput ref={component => this._text = component}>
{this.stat
浏览 5提问于2016-09-03得票数 2
回答已采纳
3回答
我正在创建一个待办事项应用程序，在该应用程序中，当单击按钮和单击按钮cancel时，需要显示对话框。我有两个组成部分：
AddTodo.js
import { Modal, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { GetInfoDialog } from "./GetInfoDialog";
import { React, useState } from "react";
function useChange() {
const [s
浏览 13提问于2022-07-24得票数 0
回答已采纳
1回答
我已经阅读了多个类似的问题与当前的问题，我有。我希望用户单击登录按钮，它将转到包含选项卡导航器的下一个屏幕。
当前的问题是，当用户单击登录按钮时，会弹出未定义的错误。关于用户名和密码认证，暂时可以忽略它，因为现在我想要了解的是如何单击按钮，它将导航到从"LoginScreen.js“到"FrontPage.js”的下一个屏幕。
LoginScreen.js
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
Ima
浏览 2提问于2018-01-04得票数 0
当我单击列表的最后一个按钮或与屏幕底部对齐的按钮并将焦点放在TextInput上时，Modal会自动关闭，而不会出现任何错误。这只发生在android真正的设备上。这个问题在iOS或安卓模拟器上不会发生。
import React, {useState} from 'react';
import {
FlatList,
TouchableOpacity,
Button,
Modal,
TextInput,
} from 'react-native';
const data = [
0,
1,
2,
3,
4,
5,
浏览 5提问于2020-05-11得票数 3
在Parent组件中，当按下第一个Child组件的TextInput中的submit按钮时，我试图将焦点放在第二个Child组件的TextInput上，但出现了这个错误：error message Child.js import React from "react";
import { View, TextInput} from "react-native";
export default class Child extends React.Component {
focus = ref => {
ref.input.focus();
浏览 31提问于2019-02-10得票数 2
伙计们，我对事件onPress有问题！如果我更改TextInput值函数_find()工作，但单击按钮事件无效。控制台中的错误：“警告:失败的道具类型:螺旋桨onPress在Button中被标记为必需，但它的值是undefined。”
import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View,StyleSheet,Button } from 'react-native';
export default class inputText exte
浏览 0提问于2018-05-29得票数 0
回答已采纳
React Native的新手，尝试应用程序的想法。基本上，我只是尝试创建一个当我按下按钮时出现的TextInput元素。下面是我的尝试。我试图在我的类中利用状态，但有些地方不对劲。 Expo抛出错误“null不是一个对象(计算'this.state.isShowingText')‘”。 有什么想法吗？ import React, { Component } from 'react';
import { TextInput, Alert, Button, ScrollView, Text, View, StyleSheet } from 'react-
浏览 8提问于2020-01-21得票数 0
以下代码在iOS (iPhone 6)中不能正常工作。当我按下‘Push Me’时，这个词不能完全显示，光标也不能显示。在进一步的调查中，我发现onChangeText和onContentSize的改变并没有被触发。在按下‘Push Me’按钮后，按下键盘上的任意键都会显示完整的单词。我希望在单击按钮时显示完整的单词。如果我使用value prop来更新TextInput，它就可以工作。但是我需要像这个链接中的‘TokenizedTextExample’那样显示格式化的文本：
import React, { Component } from 'react';
import {
浏览 0提问于2017-03-23得票数 3
5回答
我正在使用react-native构建一个地图应用程序。我使用的api来自于以下链接：。
下面是我把地图带到我的应用程序上的代码。我想知道我怎么能在那张地图上给出一个缩放值。以及如何在用户单击地图上的按钮时更改缩放值。
我应该使用什么缩放API来实现这一点？
import React, { Component, StyleSheet, View, TextInput } from "react-native";
import MapView from "react-native-maps";
class MapPage extends Component {
浏览 6提问于2016-04-18得票数 37
回答已采纳
3回答
如何在JSS中指定:焦点属性？
、、、、
我将react-native-web与expo和react-native-paper (material ui)一起使用
我的问题是在编译的web版本中的焦点轮廓属性上的文本区域，所以我需要去掉这个蓝色边框。通常我会这样做
textarea:focus {
outline:none!important
}
对于react-native，我们不能只使用jss而使用css，但是如何使用这个属性呢？
<TextInput
label='Email'
value={this.state.text}
onChangeText={text => thi
浏览 0提问于2019-09-01得票数 1
我试图清除用户的价值从TextInput时，用户点击按钮，但不能得到它。
我正在实现这个演示使用钩子在反应-本机。
所以请帮帮我，我是新来的，有反应的，谢谢你的进步。
import React, { useState, useEffect } from 'react';
import { StyleSheet, View, TextInput, TouchableOpacity, Text } from 'react-native';
import { RFValue } from 'react-native-responsive-fo
浏览 2提问于2021-03-09得票数 1
回答已采纳
如上所示，将焦点放在TextInput上，然后单击其他位置。
第一次点击绿色区域是有效的。
第一次点击红色区域是无效的(这是一个ListView )。在安卓上第一次点击硬件上的后退按钮时也会发生同样的事情，而之前的重点是TextInput。
是bug还是我遗漏了什么？(我使用的react-native版本是0.16.0-rc )
浏览 0提问于2015-11-30得票数 0
react-native-router-flux版本: 3.39.1
嗨，我需要访问组件状态时，用户单击导航栏的后退按钮，以转到上一个场景。有没有办法做到这一点？我需要这个来验证状态，如果用户在任何textInput上做了一些工作。
浏览 3提问于2017-08-11得票数 0
2回答
我有一个计数器按钮，它可以减少/增加文本输入的数字1。我的计数器最初被设置为0，如果我按下“增加”按钮，它会增加1。但是，如果我删除初始的0并手动输入一个数字，计数器按钮将把它增加到值1。
我该怎么解决这个问题？
此外，由于maxValue和minValue似乎不起作用，我如何防止这个数字超过99而小于1。
ShopAttack.js
import React from 'react';
import { Badge } from 'native-base';
import {MaterialIcons as Icon} from '@expo/vect
浏览 0提问于2019-07-29得票数 1
我是第一次接触react-native。
我现在在键盘上很吃力。我有TextInput和一个按钮。我想要的是，当用户通过键盘输入输入时，他/她只需单击返回按钮即可转到下一页。所以我只想让onSubmit方法在用户点击键盘上的“返回”按钮时被调用。有没有人能帮我？
浏览 0提问于2017-01-02得票数 4
回答已采纳
在带有React Native 0.44的IOS模拟器中，Fetch不起作用。我正在尝试使用fetch在react原生中创建一个登录表单。
这是我的代码
login.ios.js
import React, { Component } from 'react';
import { StyleSheet,TextInput,ActivityIndicatorIOS,TouchableHighlight, Text, View } from 'react-native';
class Login extends Component {
constructor
浏览 1提问于2017-10-06得票数 0
2回答
请您告诉我如何获得input field值，或者换句话说，在按钮单击用户名和密码输入字段值。
这是我的代码
import React from 'react';
import {
registerComponent,
} from 'react-native-playground';
import {
Text,
View,
Image,
StyleSheet,
TextInput,
TouchableHighlight
} from 'react-native';
class App e
浏览 4提问于2017-01-15得票数 3
在react-native中，当用户点击按钮时，它应该转到键入模式，即每当用户点击按钮时，软件键盘应该打开，光标应该转到键入模式，即光标应该指向TextInput。这意味着我想要与keyboard.dismiss()相反的函数。
<Button>Typing mode </Button>
<TextInput/>
浏览 19提问于2018-03-01得票数 1
回答已采纳
我是新来的反应本地人。我试图遵循官方文档- 创建一个反应输入文本框。
它使用Android ADV。当我点击输入文本框时，键盘不会打开。同样，在Click事件上，什么也没有发生。这是密码。
import React, { Component } from 'react'
import {
StyleSheet,
TouchableOpacity,
Text,
View,
} from 'react-native'
export default class Login extends Component {
state =
浏览 1提问于2020-07-28得票数 0
我试着学习使用。但我完全不明白这个概念。我想通过单击保存数据的按钮(也称为“保存”按钮)将数据保存在AsyncStorage和Picker上，将TextInput应用程序用于自己的ReactiveNative应用程序。然后，下次我打开应用程序时，保存的数据将出现在TextInput和Picker中。我怎样才能做到这一点？
下面是我使用TextInput和Picker的应用程序项目的代码：
import * as React from 'react';
import { useState, useEffect } from 'react';
import {
浏览 6提问于2021-12-15得票数 0
1回答
我在其中一个教程中找到了这段代码，据我所知，当在输入中输入文本时，文本保存在异步存储中，但是如何使按下按钮时，形成一个对象并将其添加到状态中，如thi的{id: 1, name: 'Alex'} ，如何将其重新定位？
import React, { Component } from 'react'
import { StatusBar } from 'react-native'
import { AsyncStorage, Text, View, TextInput, StyleSheet } from 'react-native'
浏览 1提问于2020-08-13得票数 0
我在react-native中有这个组件，当我按下按钮时，我需要克隆整个视图。
我该怎么做呢？
import React, { Component } from 'react';
import {
Platform, Text, Image, View, TextInput, TouchableOpacity, ScrollView } from 'react-native';
import styles from '../../assets/Styles'
浏览 5提问于2018-07-29得票数 1
回答已采纳
1回答
我想在react-native中创建一个搜索栏，如下所示： ? 如果我单击图标，我将焦点放在textInput上，但如果我单击屏幕的其他部分，则取消对textInput的焦点。 焦点部分与ref一起工作，但我不知道当我在屏幕的其他部分单击时是否可以取消对文本输入的焦点。 <TextInput
multiline={false}
onChangeText={(text) => onChangeText(text)}
placeholder="search"
style={styles.textInput}
value=
浏览 17提问于2020-07-24得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
