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/>标记。课堂上的变化是为了显示比相机按钮更大的实际图片。

meteor@1.1.6 千年发展目标：camera@1.1.4 reactjs：react@0.2.4

Answer 1

单击按钮的默认行为是提交表单，这会导致刷新。您需要阻止此默认行为。 click事件处理程序（在您的情况下是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组件在表单内部刷新页面

1 个答案: