在 Props 上 React Native StackNavigator Reference Null

Question

我正在使用 @react-navigation/stack 在我们的应用程序上使用它。我们有一个问题，在我们导航到细节组件后，我们需要导航回主组件，细节组件有一个输入参考，以便将焦点放在安装上。

所以我们有了这个。

    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 导航到 'Search'，在搜索中我们有这样的东西：

  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 转到条码时，我得到：

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>);
    }
}

在 Props 上 React Native StackNavigator Reference Null

React Native StackNavigator Reference Null on Props

react-native

react-props

react-ref