4

I am having trouble having my React application to work optimally on mobile Safari. My app will PUT, POST, PATCH, and DELETE normally on desktop but won't do so on my iPhone. I've tried adding "cursor:pointer" and onTouchStart to my React component below but nothing seems to be doing the trick. 

 onSubmit(event) {
    const name = this.state.name;
    const instructor = cookies.get('instructor')._id;
    this.setState({
       submitted: true,
     });
    this.props.dispatch(actions.editCourse(name,this.props.match.params.cuid));
   }



  render() {
    if (this.state.submitted) {
       window.location.href = `https://young-mountain-65748.herokuapp.com /courses/${this.props.match.params.cuid}`;
    }
return (
    <div className="container">
        <div className="field-line">
          <label htmlFor="coursename">New Course Name:</label>
          <input
            id="coursename"
            name="coursename"
            value={this.state.name}
            onChange={this.updateName}
          />
        </div>
    </div>
    <div className="edit-course-buttons">
      <button
        className="edit-course"
        onClick={this.onSubmit}
        onTouchStart={this.onSubmit}>
        Edit Course
      </button>
    </div>
  </div>
);

} }

fj785
  • 133
  • 1
  • 10

1 Answers1

0

I too had the same issue on iOS devices. Was able to get over these by replacing onClick with touch events. Check this documentation on touch events in ReactJS. You may use onTouchStart instead of onClick and see if it works! So your button should look like this:

<button onTouchStart="{this.onSubmit}" onclick = "void(0)" ...>
</button>

I have added onClick as suggested in an accepted answer here.

https://facebook.github.io/react/docs/events.html#touch-events

Check the similar question, as per the answer most voted you need to use touchevent and add cursor: pointer; css to elemnt you have click event associated with.

Peter
  • 10,492
  • 21
  • 82
  • 132
  • Hi, yeah you replied to me yesterday! I tried onTouchStart as well as onClick in my button components and it didn't work. Should I remove onClick and just have onTouchStart as a prop? Will it still work on desktop this way? – fj785 Aug 23 '17 at 03:53
  • Hmm. still not working even after removing onClick completely. – fj785 Aug 23 '17 at 04:09
  • have you added css cursor: pointer; to the button? ---> – Peter Aug 23 '17 at 04:28
  • Updated answer, could you please give it a shot! – Peter Aug 23 '17 at 05:02