javascript - React Native - Button onPress not working - Stack Overflow

admin管理员组

文章数量:1277362

I don´t understand why my function is not working when I press the button. No error shows. I also tried onPress={this.loginHandler} and theres a message that says

Warning: Failed prop type: The prop onPress is marked as required in Button, but it´s value is undefined.

Here's my code:

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

I don´t understand why my function is not working when I press the button. No error shows. I also tried onPress={this.loginHandler} and theres a message that says

Warning: Failed prop type: The prop onPress is marked as required in Button, but it´s value is undefined.

Here's my code:

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

• javascript
• reactjs
• react-native
• ecmascript-6

Share Improve this question Follow edited Sep 14, 2018 at 2:19 Dexter Naru asked Sep 14, 2018 at 1:34 Dexter NaruDexter Naru 23322 gold badges66 silver badges2020 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Try this.

Actually, you have to execute the function 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>
    );
  }
}

You can use either:

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

or:

onPress={this.loginHandler}

But, the second one is better since it will not be recreated in every render because we are using the reference, not invoking the callback. Here, the problem is you are defining your function outside of your class. So this.loginHandler does not point to your function.

It will work like this:

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

You are using an external function here, but probably you don't want this since in the future you will want to use some variables or other methods in your class. So, move it into your class and use 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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

maybe you want to try this

try to change your function like this

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

本文标签： javascriptReact NativeButton onPress not workingStack Overflow