score:12
in you're render you're setting up the handler incorrectly, give this a try;
<view>
<icon
name='heart'
color={this.state.mycolor}
size= {45}
style={{marginleft:40}}
onpress={this.handleclick}
/>
</view>
the syntax you're using would make sense for declaring an anonymous function inline or something but since your handler is defined on the class, you just reference it (not call it) using this.functionname
in the props.
score:0
you can also try this way of binding
this.handleclick = this.handleclick.bind(this)
and put this inside constructor. and while calling use this syntax
onpress = {this.handleclick}
this will surely solve your problem.
score:0
if you are not using class components, you can just drop the this
this function can handle the navigation for any route (as long as there is one screen with the name passed as the argument) removing the need for multiple handlers.
const navigation = usenavigation();
function handlenavigation(route) {
navigation.navigate(route);
}
and the button will look like this:
<button onpress={() => handlenavigation("menu")} ></button>
score:3
you need to reference the method with the this
keyword.
<icon
onpress={this.handleclick}
/>
score:12
a little late to the party, but just wanted to leave this here if someone needs it
export default class mainscreen extends component {
handleclick = () => {
//some code
}
render() {
return(
<view>
<button
name='somebutton'
onpress={() => {
this.handleclick(); //usual call like vanilla javascript, but uses this operator
}}
/>
</view>
)};
Source: stackoverflow.com
Related Query
- Call function onPress React Native
- react native how to call multiple functions when onPress is clicked
- Can't call function in react native
- React native call function in text element
- in react native app get location and call a state updating function
- How to call loading function with React useEffect only once
- Call a static function into the class React ES6
- onclick function is not working in react native application
- Render Content Dynamically from an array map function in React Native
- Call external Javascript function from react components
- React Native - Fetch call cached
- How can I call method from onPress on Alert function [React-Native]
- React hooks: call component as function vs render as element
- React native Refresh works but next call still uses the last token
- How to call a function every minute in a React component?
- Call function on keydown (Ctrl + Enter) in React
- React native buttons OnPress does not fire when app running in debug mode
- When to call function vs function() in react onClick?
- React JSX vs function call to present component
- React Native - ReactNavigation.addNavigationHelpers in not a function
- this.state is undefined during onPress event in react native
- React Native pass function to child component as prop
- Call function from another React component
- (0 , _helperModuleTransforms.getModuleName) is not a function - React Native
- React Native _this2.refs.myinput.focus is not a function
- React Native pass parameters through map function
- Best practices for using React refs to call child function
- Call API Every X Seconds in React Function Component
- stop setInterval and if not work in react native function
- React Native - useRef warning on function components
More Query from same tag
- How to create a sortable table in React? How to access class method from the sorted objects?
- useEffect Hook Not Firing After State Change
- React - index starts after array is filtered
- React: How to determine if a collection of radio buttons have a selected item?
- simplify redux with generic action & reducer
- Check the render method of 'PodCastScreen' React Native
- Video tag on react with create-react-app project
- Problems with reactstrap carousel indicators
- TS/SFC/RenderProp: Cannot invoke an expression whose type lacks a call signature
- redux-toolkit extraReducers not being invoked
- How to filter objects by roles array?
- Cannot read property 'bind' of undefined React when all properties are defined
- How can I add transition effect to images when they show up?
- key is undefined react
- Accessing React.DOM.input has been deprecated will be removed in v16.0+?
- Unexpected token in JSX when using conditional statements
- undefined in store when <Edit> data from <List>
- Way to iterate with different grid sizes
- Javascript Testing With Unique ID's
- ReactJS - managed checkbox groups
- Webpack - Setting path context for various assets and resources when bundle is created
- How can I setup my react app in ubuntu server
- this.component.name TypeError: Cannot read property 'name' of undefined
- React-Select: How to clear a selection value when another selection value change
- Why HTML SVG hexagon onClick "hitbox" being rectangular?
- Code is moving on before my fetch is completed
- How to merge 2 object together based on object A Key and object B value?
- How to send CSRF Cookie from React to Django Rest Framework with Axios
- Put a disjoint force directed graph into React app
- Accessing/Changing Parents State from Child Class using props (React)