javascript - Failed prop type: The prop `onPress` is marked as required in `Button`, but its value is `undefined` - Stack Overfl

admin管理员组

文章数量:1357678

Being new to react native , i really could not figure out as what is this error and how to resolve this error .Here is the code that I am working on .

import React,{Component} from 'react';
import { StyleSheet, Text, View,TextInput ,Button,ListItem} from 'react-native';

export default class App extends React.Component {
  state={
    placename:'',
    places:[]
  }
  placeholdername =val=>{
    this.setState({
      placename:val
    })
  };

   submithandler =()=>{
    console.log('Inside placesubmithandler');
    this.setState(prevState => {
      return {
        places: prevState.places.concat(prevState.placename)
      };
    });
  };

  render() {
    const placesOutput = this.state.places.map((place, i) => (
      <ListItem key={i} placename={place} />
    ));
    return (
      <View style={styles.container}>
      <View  style={styles.inputcontainer}>
      <TextInput
      style={{width:300,borderColor:1,borderColor:"black"}}
      placeholder="An awesome place"
      value={this.state.placename}
      onChangeText={this.placeholdername}
      style={styles.placeButton}
      />
      <Button
              title="Add"
              style={styles.placeButton}
              onPress={this.submithandler}
          />
      </View>
      <View>
      {placesOutput}
      </View>
      </View>
    );
  }
}

The error simply says that onpress is marked as reuired which I am using for buttons is undefined .What exactly is the issue ?I have removed the styling part from code .

Being new to react native , i really could not figure out as what is this error and how to resolve this error .Here is the code that I am working on .

import React,{Component} from 'react';
import { StyleSheet, Text, View,TextInput ,Button,ListItem} from 'react-native';

export default class App extends React.Component {
  state={
    placename:'',
    places:[]
  }
  placeholdername =val=>{
    this.setState({
      placename:val
    })
  };

   submithandler =()=>{
    console.log('Inside placesubmithandler');
    this.setState(prevState => {
      return {
        places: prevState.places.concat(prevState.placename)
      };
    });
  };

  render() {
    const placesOutput = this.state.places.map((place, i) => (
      <ListItem key={i} placename={place} />
    ));
    return (
      <View style={styles.container}>
      <View  style={styles.inputcontainer}>
      <TextInput
      style={{width:300,borderColor:1,borderColor:"black"}}
      placeholder="An awesome place"
      value={this.state.placename}
      onChangeText={this.placeholdername}
      style={styles.placeButton}
      />
      <Button
              title="Add"
              style={styles.placeButton}
              onPress={this.submithandler}
          />
      </View>
      <View>
      {placesOutput}
      </View>
      </View>
    );
  }
}

The error simply says that onpress is marked as reuired which I am using for buttons is undefined .What exactly is the issue ?I have removed the styling part from code .

• javascript
• react-native

Share Improve this question Follow asked Jun 29, 2018 at 17:00 jammyjammy 97733 gold badges1919 silver badges3737 bronze badges 1

• use this.submithandler() or this.submithandler = this.submithandler.bind(this) on the constractor – Masoud Tavakkoli Commented Jun 29, 2018 at 17:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

React removed "autobinding" in ES6 ponent classes.

The code onPress={this.submithandler} could fail because it's not bound to anything.

Solution : Bind in render()

    onPress={this.submithandler.bind( this )} 

Another Solution : Fat Arrow Class Methods

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

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

本文标签：