将php数据库值绑定到react.js

我会尽量缩短这个问题。</ p>

I 我正在尝试做一些react.js服务器端渲染,但我很难重构我在网上进行研究并将其应用到我的项目中所获得的信息。</ p>

我正在使用 使用mysql数据库中的用户名路由模型绑定应用程序中的所有路由。 我在react.js中有一些路由</ p>

请看下面的代码片段:</ p>

  var FileUpload = React.createClass({

handleFile:function(e){
var reader = new FileReader();
var file = e.target.files [0];

if if(!file)return;

reader。 onload = function(img){
React.findDOMNode(this.refs.in).value ='';
this.props.handleFileChange(img.target.result);
} .bind(this); \ n reader.readAsDataURL(file);
},

render:function(){
return(
&lt; input ref =“in”type =“file”accept =“image / *”action = “images / {user} / dpUpload”onChange = {this.handleFile} /&gt;
);
}
});
</ code> </ pre>

如果你 看看 render:function()</ code>,其中HTML 输入</ code>标签, action </ code>的路径为 images / {user} / dpUpload </代码>。 每个知道laravel {user} </ code>的人都可以以RESTful方式绑定到 admin </ code>。 我需要绑定数据库给我的任何反应值。 这就是我目前所获得的</ p>

</ p>
</ div>

展开原文

原文

I will try to make this question as short as possible.

I am trying to do some react.js server-side rendering but I am having a difficult time refactoring that info that I aquired from doing research online and applying it to my project.

I am using route model binding for all my routes in the application using the username in the mysql database. I have some routes within the react.js

Look at the snippet below:

var FileUpload = React.createClass({

  handleFile: function(e) {
    var reader = new FileReader();
    var file = e.target.files[0];

    if (!file) return;

    reader.onload = function(img) {
      React.findDOMNode(this.refs.in).value = '';
      this.props.handleFileChange(img.target.result);
    }.bind(this);
    reader.readAsDataURL(file);
  },

  render: function() {
    return (
      <input ref="in" type="file" accept="image/*" action="images/{user}/dpUpload" onChange={this.handleFile} />
    );
  }
});

If you take a look within render:function() where the HTML input tag, action has a route of images/{user}/dpUpload. Everyone who knows laravel that {user} can bind to be admin in a RESTful way. I need to bind whatever value the database gives me to react. This is what I'm currently getting

View the images/{user}/dpUpload

1个回答



你想在React中使用 user </ code>变量而不必为它做一个ajax请求吗? / p>

您可以将其嵌入DOM中。 也许在 data-user </ code>属性中。</ p>

  //在您的页面上
&lt; div id =“user”data-user =“admin” &gt;&lt; / div&gt;

//在React
render中:function(){
var user = document.getElementById(“user”)。getAttribute(“data-user”);
return(\ n&lt; input
ref =“in”
type =“file”
accept =“image / *”
action =“images / {user} / dpUpload”
onChange = {this.handleFile} / &gt;
);
}
</ code> </ pre>

您也可以将用户变量放在页面上的脚本标记中,并使用在React中访问它 window.myUserVariable </ code>。</ p>
</ div>

展开原文

原文

You'd like the user variable available in React without having to do an ajax request for it?

You could embed it in the DOM. Perhaps in a data-user attribute.

// On your page
<div id="user" data-user="admin"></div>

// In React
render: function() {
    var user = document.getElementById("user").getAttribute("data-user");
    return (
      <input 
        ref="in" 
        type="file" 
        accept="image/*" 
        action="images/{user}/dpUpload" 
        onChange={this.handleFile} />
    );
}

You could also just put the user variable within a script tag on your page and access it in React with window.myUserVariable.

dpfz27768
dpfz27768 是的,在这种情况下,他们谈论的是从DOM读取表单输入的值(event.target.value)
接近 5 年之前 回复
dqb77047
dqb77047 好笑的。 我在facebook.github.io/react/docs/two-way-binding-helpers.html上发现了这篇文章,并指出你必须从DOM获取数据。
接近 5 年之前 回复
duandian2725
duandian2725 太精彩了。
接近 5 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐