我定义了两个TextInput字段,如下所示:
但在按下键盘上的“下一步”按钮后,我的react原生应用程序并没有跳到第二个TextInput字段。我怎样才能做到这一点呢?
谢谢!
发布于 2015-09-24 13:08:59
设置第二个
焦点,当上一个
%s
都被触发了。
试试这个
将引用添加到
第二个TextInput
将焦点函数绑定到
第一个TextInput
的onSubmitEditing事件。
记住将blurOnSubmit设置为false,以防止键盘闪烁。
当全部完成后,它应该看起来像这样。
{ this.secondTextInput.focus(); }}
blurOnSubmit={false}
/>
{ this.secondTextInput = input; }}
placeholder="secondTextInput"
/>
发布于 2020-01-07 18:36:18
我想我会用一个函数组件来分享我的解决方案...‘
这个
“不需要!
React 16.12.0和React Native 0.61.5
下面是我的组件的一个示例:
import React, { useRef } from 'react'
...
const MyFormComponent = () => {
const ref_input2 = useRef();
const ref_input3 = useRef();
return (
<>
ref_input2.current.focus()}
/>
ref_input3.current.focus()}
ref={ref_input2}
/>
)
}
发布于 2016-01-29 03:56:13
你可以做到这一点
不使用refs
..。这种方法是首选的,因为引用可能导致
脆弱代码
..。The The The
React文档
建议在可能的情况下寻找其他解决方案:
如果你没有用React编写过几个应用程序,你的第一个倾向通常是尝试在你的应用程序中使用refs来“让事情发生”。如果是这样的话,花点时间仔细考虑一下状态应该在组件层次结构中的什么位置拥有。通常,很明显,“拥有”该状态的适当位置在层次结构中的较高级别。将状态放在那里通常会消除任何使用ref来“使事情发生”的愿望-相反,数据流通常会实现您的目标。
相反,我们将使用状态变量来关注第二个输入字段。
添加一个状态变量,我们将其作为道具传递给
:
initialState() { return { focusDescriptionInput: false,};}
定义一个将此状态变量设置为true的处理程序方法:
handleTitleInputSubmit() { this.setState(focusDescriptionInput: true);}
在提交/点击enter / next后,
,我们会打电话给
..。这将设置
是真的。
%s
prop设置为我们的
状态变量。所以,什么时候
更改(在步骤3中),
将使用
..。
这是一个避免使用refs的好方法,因为refs会导致更脆弱的代码:)
EDIT: h/t to @LaneRettig,指出您需要使用一些附加的支持和方法来包装React Native TextInput,以使其响应
// Props:
static propTypes = {
focus: PropTypes.bool,
}
static defaultProps = {
focus: false,
}
// Methods:
focus() {
this._component.focus();
}
componentWillReceiveProps(nextProps) {
const {focus} = nextProps;
focus && this.focus();
}
https://stackoverflow.com/questions/32748718
复制相似问题