小编Ink*_*ing的帖子

设置为选择框选择哪个选项的React方法是value在<select>自身上设置一个特殊属性,对应于您希望选择value的<option>元素上的属性.对于multipleselect,此属性可以接受数组.(编辑:目前文档似乎已删除对此的引用)

现在因为这是一个特殊属性,我想知道当用户改变事物时,在相同的数组选项值结构中检索所选选项的规范方法是什么(所以我可以通过回调将其传递给父组件等),因为可能value在DOM元素上不可用相同的属性.

要使用示例,使用文本字段,您可以执行类似这样的操作(JSX):

var TextComponent = React.createClass({
  handleChange: function(e) {
    var newText = e.target.value;
    this.props.someCallbackFromParent(newText);
  },
  render: function() {
    return <input type="text" value={this.props.someText} onChange={this.handleChange} />;
  }
});

???这个多选组件的替代等价是什么？

var MultiSelectComponent = React.createClass({
  handleChange: function(e) {
    var newArrayOfSelectedOptionValues = ???;
    this.props.someCallbackFromParent(newArrayOfSelectedOptionValues);
  },
  render: function() {
    return (
      <select multiple={true} value={this.props.arrayOfOptionValues} onChange={this.handleChange}>
        <option value={1}>First option</option>
        <option value={2}>Second option</option>
        <option value={3}>Third option</option>
      </select>
    );
  }
});

到目前为止,我只处理了服务器呈现的应用程序,在用户通过用户名/密码或使用OAuth提供程序(Facebook等)登录后,服务器只需设置会话cookie,同时重定向到相关页面.

但是现在我正在尝试使用更"现代"的方法构建应用程序,在前端使用React并使用JSON API后端.显然,标准选择是使用JSON Web令牌进行身份验证,但是我无法弄清楚我是如何向客户端提供JWT的,因此它可以存储在会话/本地存储中或任何地方.

示例更好地说明:

1. 用户点击link(/auth/facebook)即可通过Facebook登录

2. 用户被重定向并显示Facebook登录表单和/或权限对话框(如有必要)

3. Facebook将用户重定向回/auth/facebook/callback授权代码,服务器将其交换为访问令牌和一些有关用户的信息

4. 服务器使用info在DB中查找或创建用户,然后创建包含用户数据的相关子集的JWT(例如ID)

5. ???

此时我只想让用户被重定向到React应用程序的主页面(让我们说/app)与JWT,所以前端可以接管.但是我不能想到一种(优雅的)方式来做到这一点而不会丢失JWT,除了将它放在redirect(/app?authtoken=...)的查询字符串中- 但是这将显示在地址栏中,直到我删除它手动使用replaceState()或其他什么,对我来说似乎有点奇怪.

真的我只是想知道这通常是怎么做的,我几乎可以肯定我在这里遗漏了一些东西.服务器是Node(Koa with Passport),如果有帮助的话.

编辑:要清楚,我问的是在使用Passport 进行OAuth重定向流之后,为客户端提供令牌(因此可以保存)的最佳方法是什么.

我正在开发一个网络应用程序,我希望在大屏幕上有两个可独立滚动的区域:左侧的主要内容区域和右侧的较小侧边栏.

我已经设法使用absolute定位和overflow属性在CSS中实现这样的布局,请参阅此JSFiddle:http://jsfiddle.net/XLceP/

这很好,但我也试图利用Bootstrap(3.1.1)来使网站响应和组件/样式.但是我不知道该怎么做.

基本上,我理想地喜欢使用Bootstrap约定(列类等)来使它在移动屏幕上右窗格在左窗格下方折叠(或完全消失)以用于传统的垂直布局,同时占用全屏宽度.但是,在absolute为更大的屏幕布局使用定位时,似乎不可能这样做.

我该如何尝试解决这个问题？