React Native StackNavigator Ссылка Null на реквизит - PullRequest
Новая
       96

React Native StackNavigator Ссылка Null на реквизит

0 голосов
/ 25 февраля 2020

Я использую @react-navigation/stack, чтобы использовать его в нашем приложении. У нас есть проблема, заключающаяся в том, что после того, как мы перейдем к компоненту Detail, нам нужно вернуться обратно к главному компоненту, компонент Detail будет иметь ссылку для ввода, чтобы сфокусироваться на монтировании.

Итак, у нас есть это. 

    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 на go для штрих-кода, я получаю:

TypeError: undefined не является объектом (_this.input.current.focus)

Я не знаю, не указана ли ссылка должным образом.

Любой совет?

enter image description here

1 Ответ

1 голос
/ 25 февраля 2020

Вы должны определить ссылку внутри компонента 

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