[英]focus next textInput in react native in functional component
i have a component for textinput我有一个文本输入组件
return (
<TextInput
onChangeText={(text) => {
props.onChange(text)
}}
value={props.value}
placeholder={props.placeholder}
placeholderTextColor={Colors.gry}
autoFocus={props.focus ? true : false}
onFocus={() => setColor(Colors.org)}
onBlur={() => setColor(Colors.gry)}
ref={props.ref}
returnKeyType='next'
/>
)
i'm using this component like this我正在像这样使用这个组件
const inputRef = useRef<any>()
<Input
keyboard={'numeric'}
onChange={(text) => {
setOtp({ ...otp, o1: text })
inputRef.current.focus()
}}
value={otp.o1}
max={1}
/>
</View>
<View style={styles.input}>
<Input
keyboard={'numeric'}
onChange={(text) => setOtp({ ...otp, o2: text })}
value={otp.o2}
ref={inputRef}
max={1}
/>
</View>
i want to focus next input field when change text in first input field how can i do it?我想在第一个输入字段中更改文本时关注下一个输入字段,我该怎么做?
Since your component Input is a wrapper for TextInput you need to use forwardRef to pass the ref to inner child and not directly through props由于您的组件 Input 是 TextInput 的包装器,因此您需要使用forwardRef将 ref 传递给 inner child 而不是直接通过 props
here is a code snipprt from react documentation on how to do it这是有关如何操作的反应文档中的代码片段
const Input = React.forwardRef((props, ref) => (
<TextInput
onChangeText={(text) => {
props.onChange(text)
}}
value={props.value}
placeholder={props.placeholder}
placeholderTextColor={Colors.gry}
autoFocus={props.focus ? true : false}
onFocus={() => setColor(Colors.org)}
onBlur={() => setColor(Colors.gry)}
ref={ref}
returnKeyType='next'
/>)
// You can now get a ref directly :
const inputRef = React.createRef();
<Input
keyboard={'numeric'}
onChange={(text) => setOtp({ ...otp, o2: text })}
value={otp.o2}
ref={inputRef}
max={1}
then you can use focus然后你可以使用焦点
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.