react-native - React Native StackNavigator Reference Null on Props

Question

我正在使用@react-navigation/stack在我们的应用程序上使用它。我们有一个问题，在导航到 Detail 组件后，我们需要导航回 Main 组件，Detail 组件有一个 Reference 用于输入以将焦点放在挂载上。

所以我们有这个。

    const input = React.createRef();
    class Barcode extends React.Component {

       componentDidMount() {
            if(this.input){ 
                setTimeout(() => {
                    this.input.current.focus();
                }, 400);
            }
        }

  moveUpdate() {
        const { barcodeReducerMessageVisible, barcodeReducerMessage, barcodeReducerMessageFinished } = this.props;
        if(barcodeReducerMessageFinished) {
          this.props.navigation.navigate('Search');
        }
      }


    render() {
      return ( <ScrollView keyboardShouldPersistTaps={'handled'}>
                    <Input
                      label="Código de barras"
                      placeholder="Código de barras"
                      errorStyle={{ color: "red" }}
                      inputStyle={{ marginTop: 40, marginBottom: 40 }}
                      onChangeText={textBarcode => this.setState({ textBarcode })}
                      value={textBarcode}
                      ref={(ref)=>{this.input = ref}}
                      onBlur={() => this.Save()}
                    /> </ScrollView> );
    }
    } 

所以 moveUpdate 导航到“搜索”，在搜索时我们有这样的东西：

  ChangeBarCode(stockidRewn = null) {
    this.props.navigation.navigate('Barcode', { stockidRewn } ,{ stockidRewn: stockidRewn });
  }

  <ListItem
                    leftAvatar={{ source: { uri: searchProductReducerRepos[key].vtiger_productid } }}
                    key={key}
                    title={searchProductReducerRepos[key].description}
                    subtitle={description}
                    bottomDivider
                    onPress={() => this.ChangeBarCode(searchProductReducerRepos[key].stockid)}
                  />

当我再次调用 onPress 去 Barcode 时，我得到：

TypeError: undefined is not an object (_this.input.current.focus)

我不知道引用是否没有正确声明。

有什么建议吗？

Answer 1

您应该在组件内定义 ref

class Barcode extends React.Component {

    // declaring ref inside the component
    input = React.createRef();

    componentDidMount() {
        if (this.input) {
            setTimeout(() => {
                this.input.current.focus();
            }, 400);
        }
    }

    moveUpdate() {
        const { barcodeReducerMessageVisible, barcodeReducerMessage, barcodeReducerMessageFinished } = this.props;
        if (barcodeReducerMessageFinished) {
            this.props.navigation.navigate('Search');
        }
    }


    render() {
        return (<ScrollView keyboardShouldPersistTaps={'handled'}>
            <Input
                label="Código de barras"
                placeholder="Código de barras"
                errorStyle={{ color: "red" }}
                inputStyle={{ marginTop: 40, marginBottom: 40 }}
                onChangeText={textBarcode => this.setState({ textBarcode })}
                value={textBarcode}
                ref={(ref) => { this.input = ref }}
                onBlur={() => this.Save()}
            /> </ScrollView>);
    }
}