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函数。

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 2

你可以使用：

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 3

也许你想试试这个

试着像这样改变你的功能

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