OGeek|极客世界-中国程序员成长平台

标题: ios - 点击事件不会在点击 iOS 设备时触发，但在桌面上按预期工作 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-11 18:32
标题: ios - 点击事件不会在点击 iOS 设备时触发，但在桌面上按预期工作

我无法让我的 React 应用程序在移动 Safari 上以最佳方式运行。我的应用程序通常会在桌面上放置、发布、修补和删除，但在我的 iPhone 上不会这样做。我尝试在下面的 React 组件中添加“cursor:pointer”和 onTouchStart，但似乎没有任何效果。

 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>
);

} }

---

Best Answer-推荐答案

我在 iOS 设备上也遇到了同样的问题。能够通过将 onClick 替换为触摸事件来克服这些问题。查看有关 ReactJS 中触摸事件的文档。您可以使用 onTouchStart 代替 onClick 看看它是否有效!所以你的按钮应该是这样的:

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

我已按照接受的答案 here 中的建议添加了 onClick .

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

检查类似的问题，根据 answer投票最多的您需要使用 touchevent 并将 cursor:pointer; css 添加到与 click 事件关联的元素中。

关于ios - 点击事件不会在点击 iOS 设备时触发，但在桌面上按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45829772/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (https://ogeek.cn/)

Powered by Discuz! X3.4