How to get Element Properties in React Native on a Click Event

Question

How should I access the properties of an element without using the 'this' keyword in React Native? I have a function with which the parent class itself is bound as 'this' but I want to access the properties of the element that is being clicked. Here's the code-

import {Circle} from 'react-native-svg';
export default App extends Component {
  constructor(props) {
  super(props);
  this.state = {activeX: null}
 }

 handleTouch(event) {
   const x = event.target.cx; //How to access "cx" property here?
   this.setState({ activeX: x });
 }

 render() {
   return (
     <Circle cx='10' cy='10' r='5' onPress={this.handleTouch.bind(this)}/>
     <Circle cx='20' cy='20' r='5' onPress={this.handleTouch.bind(this)}/>
   );
 }
}

Kawatare267 · Answer 1 · 2017-06-16T09:41:21.693

1

Try this

import {Circle} from 'react-native-svg';
export default App extends Component {
  constructor(props) {
  super(props);
  this.state = {
    activeX: null,
    cx: 10
  }
 }

 handleTouch = () => {
   const x = this.state.cx
   this.setState({ activeX: x });
 }

 render() {
   return (
     <Circle cx={this.state.cx} cy='10' r='5' onPress={this.handleTouch}/>

   );
 }
}

edited Jun 16 '17 at 09:41

answered Jun 16 '17 at 09:00

Kawatare267

4,168
3
16
16

1

The cx property is not fixed, it cannot be defined in the state. Actually activeX stores the x coordinate of the circle's centre that gets clicked. Just like in HTML we use 'event.target.id' to extract id of the clicked element. Similarly how should I access the 'cx' prop using the event object here? – Utkarsh Sah Jun 16 '17 at 13:35

Utkarsh Sah · Accepted Answer · 2017-06-17T05:43:49.783

1

import ReactNativeComponentTree from'react-native/Libraries/Renderer/src/renderers/native/ReactNativeComponentTree';

And access the properties as-

const x = ReactNativeComponentTree.getInstanceFromNode(event.currentTarget)._currentElement.props.cx;

edited Jun 17 '17 at 05:43

answered Jun 17 '17 at 05:28

Utkarsh Sah

301
1
2
12

5

This seems hacky. Is it documented/recommended/endorsed somewhere by React? – hippietrail Sep 22 '17 at 04:52
1

It seems to be changed at the latest version. `react-native/Libraries/Renderer/src/renderers/native/ReactNativeComponentTree` -> `react-native/Libraries/Renderer/shims/ReactNativeComponentTree`, `._currentElement.props` -> `.memoizedProps` – mpyw Nov 08 '17 at 05:49
2

@hippietrail It's hacky and **very slow**. We'd better avoid this tips. – mpyw Nov 08 '17 at 05:50

score 1 · Answer 3 · answered Aug 16 '17 at 07:36

Sorry for leaving an answer but I cannot leave a comment since <50 rep.

You should edit the improve part of your answer, with the following bit:

import ReactNativeComponentTree from 'react-native';

instead of what you have right now,

import ReactNativeComponentTree from'react-native/Libraries/Renderer/src/renderers/native/ReactNativeComponentTree';

since is throwing an error (trying to import unknown module).

Florent Roques · Answer 4 · 2018-02-25T22:26:19.343

A better way of accessing the component properties in an event is actually by creating a component and passing it the needed data:

import { Circle } from 'react-native-svg';

class TouchableCircle extends React.PureComponent {
  constructor(props) {
    super(props);
    this.circlePressed = this.circlePressed.bind(this);
  }

  circlePressed(){
    this.props.onPress(this.props.cx);
  }

  render() {
    return (
      <Circle cx={this.props.cx} cy={this.props.cy} r={this.props.r} onPress={this.circlePressed}/>
    );
  }
}

export default App extends Component {
  constructor(props) {
  super(props);

  this.state = {activeX: null}
  this.handleTouch = this.handleTouch.bind(this);
 }

 handleTouch(cx) {
   this.setState({ activeX: cx });
 }

 render() {
   return (
     <TouchableCircle cx='10' cy='10' r='5' onPress={this.handleTouch}/>
     <TouchableCircle cx='20' cy='20' r='5' onPress={this.handleTouch}/>
   );
 }
}

NB: Performance tip from Facebook for event handlers:

We generally recommend binding in the constructor or using the property initializer syntax, to avoid this sort of performance problem. (i.e. to avoid the creation of the callback everytime a component renders)

ref: React Handling Events

(credits to https://stackoverflow.com/a/42125039/1152843)

score 0 · Answer 5 · answered Nov 25 '19 at 08:44

You can change your event handler to a curried function like so:

import {Circle} from 'react-native-svg';
export default App extends Component {
  constructor(props) {
  super(props);
  this.state = {activeX: null}
 }

 //Use ES6 arrow and avoid this.bind
 //Curried function handleTouch accepts cx, cy as extra parameters
 handleTouch = (cx, cy) => event => {
   console.log(cx, cy) // This is how you access props passed to Circle here
   console.log(event)
   this.setState({ activeX: cx });
 }

 render() {

   //You are actually invoking the handleTouch function here, whose return value is
   //a function, which is set as the onPress event handler for the <Circle> component
   return (
     <Circle cx='10' cy='10' r='5' onPress={this.handleTouch(10, 10)}/>
     <Circle cx='20' cy='20' r='5' onPress={this.handleTouch.(20, 20)}/>
   );
 }
}

Checkout the working snack below:

https://snack.expo.io/@prashand/accessing-props-from-react-native-touch-event

How to get Element Properties in React Native on a Click Event

5 Answers5

Linked