反应本机-按钮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>
    );
  }
}