我的 ReactMeteor Photo 组件在表单内刷新页面

Question

我有一个这样的照片组件：

Photo=ReactMeteor.createClass({
getInitialState:function(){
    return({
        photo:'Camera.png',
        photoClass:'mouseChange'
    });
},
takePicture:function(){
    var that = this;
    MeteorCamera.getPicture({}, function(error,data){
      if(error){
        alert(error.error);
      }else{
        that.setState({photo: data, photoClass:'pictureTaken'});
      }
    });
},
render:function(){
    return(
        <button>
          <img src={this.state.photo} className={this.state.photoClass} onClick={this.takePicture}/>
        </button>
    );
}   
});

当我在表单外使用它时，它按预期工作。

但是在表单内部，它会在通常请求使用相机权限的位置刷新页面。然后它还将页面的 url 更改为我从未配置的内容。

在这两种情况下，我都添加了一个 <Photo/> 标签。 class中的更改是为了显示实际图片比相机按钮大一点。

流星@1.1.6 mdg:camera@1.1.4 reactjs:react@0.2.4

Answer 1

点击按钮的默认行为是提交表单，这会导致刷新。您需要防止这种默认行为。单击事件处理程序（在您的情况下为 takePicture 方法）将事件作为参数获取。你需要做的是调用 event.preventDefault();

因此您的 takePicture 方法的代码应如下所示：

takePicture: function(event){
    // This will prevent the refresh
    event.preventDefault();
  
    var that = this;
    MeteorCamera.getPicture({}, function(error,data){
      if(error){
        alert(error.error);
      }else{
        that.setState({photo: data, photoClass:'pictureTaken'});
      }
    });
}

我的 ReactMeteor Photo 组件在表单内刷新页面

My ReactMeteor Photo component refreshes the page when inside a form

javascript

forms

camera

meteor

reactjs