Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's the proper way of binding touchstart on React JS?

I am learning React JS and as of now I cannot find any example on the source code, tests or on the official docs. On the docs the touchStart event is said to be supported but handleTouchStart does not work.

The only place I found and example that actually works was on react-touch project.

The following code works, but is this the only way of binding? It looks like a cheap workaround for me.

var MyHeader = React.createClass({
  handleTouchStart: function() {
    console.log('handleTouchStart');
  },
  render: function() {
    return this.transferPropsTo(
        <header onTouchStart={this.handleTouchStart}>{title}</header>
    );
  }
};

What is actually the proper way of doing this?

like image 774
Irae Carvalho Avatar asked Feb 27 '14 04:02

Irae Carvalho


People also ask

How do you bind the data in React JS?

One-way Data Binding: ReactJS uses one-way data binding. In one-way data binding one of the following conditions can be followed: Component to View: Any change in component data would get reflected in the view. View to Component: Any change in View would get reflected in the component's data.

What is binding in React JS?

ReactJS bind() Method The bind() is an inbuilt method in React that is used to pass the data as an argument to the function of a class based component. Syntax: this.

How does two way binding work React JS?

LinkedStateMixin is an easy way to express two-way binding with React. In React, data flows one way: from owner to child. We think that this makes your app's code easier to understand. You can think of it as “one-way data binding.”

How do you bind Touchstart and click events but not respond to both?

Just adding return false; at the end of the on("click touchstart") event function can solve this problem.


Video Answer


1 Answers

Since React v0.14, you don't have to call React.initializeTouchEvents(true); manually anymore.

http://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#breaking-changes

like image 116
jasonslyvia Avatar answered Oct 13 '22 22:10

jasonslyvia