I keep seeing answers that say to use => or .bind(this) but neither of those solutions worked.
import React, { Component } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';
export default class MyWeatherApp extends Component {
constructor(props) {
super(props);
this.state = {};
}
getInitialState() {
return {
zip: '',
forecast: null,
};
}
_handleTextChange(event) {
var zip = event.nativeEvent.text;
this.setState({zip: zip});
}----Answers------------
1.
When you
Try this:
Generally, it's better not to use arrow functions or
I personally prefer to use arrow functions as class properties in this case
You can read more about context binding in React in this article
When you
extend React.Component with ES2015 class syntax you need to bind your action handlers to a context of your class.Try this:
onChange={e => _handleTextChange(e)}Generally, it's better not to use arrow functions or
bind methods inside render as it generates a new copy of the function on any render call. Move function declaration to the class constructor.I personally prefer to use arrow functions as class properties in this case
class MyClass extends React.Component {
handleClick = () => {
// your logic
};
render() {
return (
<button onClick={this.handleClick}>Click me</button>
);
}
}
You can read more about context binding in React in this article
2.
i hope the below code may give you the idea
import React, { Component } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';
export default class MyWeatherApp extends Component {
constructor(props) {
super(props);
this.state = {
zip: '',
forecast: null
};
}
_handleTextChange(event) {
var zip = event.nativeEvent.text;
this.setState({zip: zip});
}
render() {
return (
<button onChange={e => _handleTextChange(e)}>Click me</button>
);
}
}
