我知道我们可以使用 react 类方法轻松做到这一点。因为我们有 this.ref。
但我不确定如何使用功能组件中的 useRef 钩子(Hook)来做到这一点。
使用写的技巧here
这就是我试图做到这一点的方式。
...
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}
/>
)
...
所以我需要将字段中的 ref 传递给 MyTextInput 并且在 nextKeyPress 上我想关注第二个输入组件,即 inputEl2
//我的文本输入
...
render() {
const {
input: { value, onChange, onBlur },
meta: { touched, error },
keyboardType,
placeholder,
secureTextEntry,
editable,
selectTextOnFocus,
style,
selectable,
customValue,
underlineColorAndroid,
autoFocus,
maxLength,
returnKeyType,
onEnter,
refField,
} = this.props;
const { passwordVisibility, undelineColor } = this.state;
return (
<View style={{ marginVertical: 8 }}>
<TextInput
style={[{
height: 50,
paddingLeft: 20,
color: Colors.SECONDARY_COMMON,
}, style]}
onBlur={val => onBlur(val)}
keyboardType={keyboardType}
underlineColorAndroid={undelineColor}
placeholder={placeholder}
returnKeyType={returnKeyType || 'go'}
value={customValue || value.toString()}
onChangeText={onChange}
maxLength={maxLength}
onSubmitEditing={onEnter}
ref={refField}
/>
)
}
最佳答案
const inputEl2 = useRef(null);
<TextInput
name="first_name"
placeholder="First name"
onSubmitEditing={() => inputEl2.current.focus()}
/>
<TextInput
name="last_name"
placeholder="Last name"
ref={inputEl2}
/>
它对我有用
关于reactjs - 使用redux-form按下下一个键盘按钮后如何使用useRef Hook 选择下一个TextInput,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55758413/