将下一个文本输入集中在功能组件中的本机反应中

Question

我有一个文本输入组件

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'
    />
  )

我正在像这样使用这个组件

                   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>

我想在第一个输入字段中更改文本时关注下一个输入字段，我该怎么做？

Answer 1

由于您的组件 Input 是 TextInput 的包装器，因此您需要使用forwardRef将 ref 传递给 inner child 而不是直接通过 props

这是有关如何操作的反应文档中的代码片段

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}

然后你可以使用焦点