我定义了两个TextInput字段,如下所示:
<TextInput
style = {styles.titleInput}
returnKeyType = {"next"}
autoFocus = {true}
placeholder = "Title" />
<TextInput
style = {styles.descriptionInput}
multiline = {true}
maxLength = {200}
placeholder = "Description" />
Run Code Online (Sandbox Code Playgroud)
但是在按下键盘上的"下一步"按钮后,我的react-native应用程序没有跳转到第二个TextInput字段.我怎样才能做到这一点?
谢谢!
我知道我们可以使用 react 类方法轻松做到这一点。因为我们有 this.ref。但我不确定如何在功能组件中使用 useRef 钩子来做到这一点。
使用这里写的技巧
这就是我试图做到这一点的方式。
...
const inputEl1 = useRef(null);
const inputEl2 = useRef(null);
return (
<Field
name="first_name"
component={MyTextInput}
placeholder="First name"
ref={inputEl1}
refField={inputEl1}
onEnter={() => {
inputEl2.current.focus();
}}
/>
/>
<Field
name="last_name"
placeholder="Last name"
component={MyTextInput}
ref={inputEl2}
refField={inputEl2}
/>
)
...
Run Code Online (Sandbox Code Playgroud)
所以我需要将 ref from field 传递给 MyTextInput 并且在 nextKeyPress 上我想关注第二个输入组件,即 inputEl2
// 我的文本输入
...
render() {
const {
input: { value, onChange, onBlur },
meta: { touched, error },
keyboardType,
placeholder,
secureTextEntry,
editable,
selectTextOnFocus,
style,
selectable, …Run Code Online (Sandbox Code Playgroud)