React Native - кнопка onPress не работает

Question

Я не понимаю, почему моя функция не работает, когда я нажимаю кнопку.Нет ошибок показывает.Я также попытался onPress = {this.loginHandler} и там есть сообщение, которое говорит

Предупреждение: сбойный тип пропеллера: пропеллер onPress помечен как необходимый в Button, но его значение не определено.

Вот мой код:

import React, {Component} from 'react';
import { Button} from 'react-native';


export default class AuthScreen extends Component {
  loginHandler = () => {
    console.log('P11');
  }

render() {
    return (
      <View>
          <Button style={styles.btnLogin} title='Iniciá sesión' onPress={this.loginHandler}  style={{flex:1}}/>
      </View>
    );
  }
}

Answer 1

Вы можете использовать либо:

onPress={() => this.loginHandler()}

или

onPress={this.loginHandler}

Но второе лучше, поскольку оно не будет воссоздано при каждом рендеринге, потому что мы используем ссылку, а не вызываем обратный вызов. Здесь проблема в том, что вы определяете свою функцию за пределами вашего класса. Так что this.loginHandler не указывает на вашу функцию.

Это будет работать так:

const loginHandler = () => {
  console.log("P11");
};

export default class AuthScreen extends Component {
  render() {
    return (
      <View>
        <Button
          style={styles.btnLogin}
          title="Iniciá sesión"
          onPress={loginHandler}
          style={{ flex: 1 }}
        />
      </View>
    );
  }
}

Вы используете здесь внешнюю функцию, но, вероятно, вам это не нужно, поскольку в будущем вы захотите использовать некоторые переменные или другие методы в вашем классе. Итак, переместите его в свой класс и используйте this.

export default class AuthScreen extends Component {
  loginHandler = () => {
    console.log("P11");
  };

  render() {
    return (
      <View>
        <Button
          style={styles.btnLogin}
          title="Iniciá sesión"
          onPress={this.loginHandler}
          style={{ flex: 1 }}
        />
      </View>
    );
  }
}

class App extends React.Component {
  loginHandler = () => {
    console.log("P11");
  };

  render() {
    return (
      <div>
        <button title="Iniciá sesión" onClick={this.loginHandler}>Click</button>
      </div>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

может быть, вы хотите попробовать это

попробуйте изменить свою функцию следующим образом

import React, {Component} from 'react';
import { Button} from 'react-native';


export default class AuthScreen extends Component {
  loginHandler () {
    console.log('P11');
  }

render() {
    return (
      <View>
          <Button style={styles.btnLogin} title='Iniciá sesión' onPress={this.loginHandler}  style={{flex:1}}/>
      </View>
    );
  }
}

Answer 3

Попробуйте это.

На самом деле, вы должны выполнить функцию onPress.

import React, {Component} from 'react';
import { Button} from 'react-native';


export default class AuthScreen extends Component {

  loginHandler = () => {
     console.log('P11');
  }

  render() {
    return (
      <View>
          <Button style={styles.btnLogin} title='Iniciá sesión' onPress={() => this.loginHandler()}  style={{flex:1}}/>
      </View>
    );
  }
}