自定义组件在SubmitEditting上没有关注下一个文本输入。

Question

我已经使用了反应钩子。当我按下一个按钮时，我得到的错误是undefined不是一个对象(Evaluating nextRef.focus)。

 const renderRow = (value, onUpdate, currentRef, nextRef) => {
    return (
          <View style={VALUE_CONTAINER}>
            <TextField
              autoCorrect={false}
              onChangeText={(text) => onUpdate(text)}
              autoCapitalize={"none"}
              returnKeyType={'next'}
              onSubmitEditing={() => { nextRef.current.focus() }}
              forwardedRef={(input) => { currentRef = input }}
              value={value} />
          </View>
    )
  }

我从主视图中调用了这个组件，如下所示。

        {renderRow(mobile, updateMobile, mobileRef, cityRef)}
        {renderRow( city, updateCity, cityRef, mobileRef)}

Answer 1

你没有把ref分配给currentRef.current，而是把它分配给了currentRef，这就是为什么会引起问题的原因。

const renderRow = (value, onUpdate, currentRef, nextRef) => {
    return (
          <View style={VALUE_CONTAINER}>
            <TextField
              autoCorrect={false}
              onChangeText={(text) => onUpdate(text)}
              autoCapitalize={"none"}
              returnKeyType={'next'}
              onSubmitEditing={() => { nextRef.current.focus() }}
              forwardedRef={(input) => { currentRef.current = input }}
              value={value} />
          </View>
    )
  }