React Native: Как связать переменные состояния? - PullRequest
Новая
       8

React Native: Как связать переменные состояния?

0 голосов
/ 17 января 2020

Предположим, у меня есть компонент A, подобный этому: 

class componentA extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <View><Text>abc</Text><Button onPress={this.prop.onPress}></Button><View/>;
  }
}

Затем я расширяю его как компонентB 

class componentB extends ComponentA {
  constructor(props) {
    super(props);
  }
  render() {
    return <View><Text>xyz</Text><componentA onPress={this.prop.onPress}/><View>;
  }
}

Затем в основном классе: 

class App extends ComponentB {
  constructor(props) {
    super(props);
    state={message:'Hello World'};
  }
  onPressB(()=>{alert(this.state.message);})
  render() {
    return <componentB onPress={this.prop.onPressB}/>;
  }
}

Когда Я нажимаю ComponentB, я ожидаю увидеть «Hello World», но вместо этого я получил неопределенное значение? Почему?

1 Ответ

0 голосов
/ 17 января 2020

У вас есть опечатка здесь ... 

onPressB(()=>{alert(this.state.message);})

должно быть ... 

onPressB = () => { alert(this.state.message); }

Упрощенный пример без использования структуры вашего компонента. 

import ReactDOM from "react-dom";
import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { message: "Hello World" };
  }

  onPressB = () => {
    alert(this.state.message);
  };

  render() {
    return <div onClick={this.onPressB}>testing</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
...