我定义了两个TextInput字段如下:
<TextInput
style = {styles.titleInput}
returnKeyType = {"next"}
autoFocus = {true}
placeholder = "Title" />
<TextInput
style = {styles.descriptionInput}
multiline = {true}
maxLength = {200}
placeholder = "Description" />
但在按下键盘上的“next”按钮后，我的react-native应用程序并没有跳转到第二个TextInput字段。我怎样才能做到呢?
谢谢!
当前回答
如果你的TextInput在另一个组件中，要让这个被接受的解决方案工作，你需要从ref“弹出”到父容器的引用。
// MyComponent
render() {
<View>
<TextInput ref={(r) => this.props.onRef(r)} { ...this.props }/>
</View>
}
// MyView
render() {
<MyComponent onSubmitEditing={(evt) => this.myField2.focus()}/>
<MyComponent onRef={(r) => this.myField2 = r}/>
}
其他回答
有一种方法可以捕获TextInput中的制表符。这很俗气，但总比没有好。
定义一个onChangeText处理程序，比较新输入值和旧输入值，检查是否有\t。如果找到一个，推进字段如@boredgames所示
假设变量username包含用户名的值，setUsername在存储(组件状态，redux存储等)中分派一个动作来更改它，执行如下操作:
function tabGuard (newValue, oldValue, callback, nextCallback) {
if (newValue.indexOf('\t') >= 0 && oldValue.indexOf('\t') === -1) {
callback(oldValue)
nextCallback()
} else {
callback(newValue)
}
}
class LoginScene {
focusNextField = (nextField) => {
this.refs[nextField].focus()
}
focusOnPassword = () => {
this.focusNextField('password')
}
handleUsernameChange = (newValue) => {
const { username } = this.props // or from wherever
const { setUsername } = this.props.actions // or from wherever
tabGuard(newValue, username, setUsername, this.focusOnPassword)
}
render () {
const { username } = this.props
return (
<TextInput ref='username'
placeholder='Username'
autoCapitalize='none'
autoCorrect={false}
autoFocus
keyboardType='email-address'
onChangeText={handleUsernameChange}
blurOnSubmit={false}
onSubmitEditing={focusOnPassword}
value={username} />
)
}
}
对于RN 0.50.3的我来说，这是可能的:
<TextInput
autoFocus={true}
onSubmitEditing={() => {this.PasswordInputRef._root.focus()}}
/>
<TextInput ref={input => {this.PasswordInputRef = input}} />
你必须看到这个。
我想分享我的解决方案使用功能组件…“这个”不需要!
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 (
<>
<TextInput
placeholder="Input1"
autoFocus={true}
returnKeyType="next"
onSubmitEditing={() => ref_input2.current.focus()}
/>
<TextInput
placeholder="Input2"
returnKeyType="next"
onSubmitEditing={() => ref_input3.current.focus()}
ref={ref_input2}
/>
<TextInput
placeholder="Input3"
ref={ref_input3}
/>
</>
)
}
RN没有某种类型的Tabindex系统，这很令人恼火。
一个功能性组件，对于我的用例，我有一个字符串id数组用于输入，我遍历并显示每个文本输入。下面的代码将自动跳过所有这些，阻止键盘在字段之间消失/重新出现，并在结束时解散它，还在键盘上显示适当的“动作”按钮。
Typescript, Native Base。
const stringFieldIDs = [ 'q1', 'q2', 'q3' ]; export default () => { const stringFieldRefs = stringFieldIDs.map(() => useRef < any > ()); const basicStringField = (id: string, ind: number) => { const posInd = stringFieldIDs.indexOf(id); const isLast = posInd === stringFieldIDs.length - 1; return ( < Input blurOnSubmit = { isLast } ref = { stringFieldRefs[posInd] } returnKeyType = { isLast ? 'done' : 'next' } onSubmitEditing = { isLast ? undefined : () => stringFieldRefs[posInd + 1].current._root.focus() } /> ); }; return stringFieldIDs.map(basicStringField); };
此处为具有:focus属性的输入组件的试剂溶液。
只要这个道具设置为true，字段就会被聚焦;如果这个道具设置为false，字段就不会有焦点。
不幸的是，这个组件需要定义一个:ref，我找不到其他方法来调用.focus()。我很高兴听到建议。
(defn focusable-input [init-attrs]
(r/create-class
{:display-name "focusable-input"
:component-will-receive-props
(fn [this new-argv]
(let [ref-c (aget this "refs" (:ref init-attrs))
focus (:focus (ru/extract-props new-argv))
is-focused (.isFocused ref-c)]
(if focus
(when-not is-focused (.focus ref-c))
(when is-focused (.blur ref-c)))))
:reagent-render
(fn [attrs]
(let [init-focus (:focus init-attrs)
auto-focus (or (:auto-focus attrs) init-focus)
attrs (assoc attrs :auto-focus auto-focus)]
[input attrs]))}))
https://gist.github.com/Knotschi/6f97efe89681ac149113ddec4c396cc5
