Javascript 反应&；引导：返回所选单选按钮的值_Javascript_Twitter Bootstrap_Reactjs

Javascript 反应&；引导：返回所选单选按钮的值

javascript twitter-bootstrap reactjs

Javascript 反应&；引导：返回所选单选按钮的值,javascript,twitter-bootstrap,reactjs,Javascript,Twitter Bootstrap,Reactjs,我在导航栏中有一个按钮组作为单选按钮。我想返回某个页面中所选按钮的值。我没有太多的经验，我有点迷路了我有两个.js文件：sidebar.js和page.js sidebar.js： import React, { Component } from 'react'; import classNames from 'classnames'; import history from '../../core/history'; import { Radio, ButtonGroup,

我在导航栏中有一个按钮组作为单选按钮。我想返回某个页面中所选按钮的值。我没有太多的经验，我有点迷路了

我有两个.js文件：sidebar.js和page.js

sidebar.js：

import React, { Component } from 'react';
import classNames from 'classnames';
import history from '../../core/history';

import {
    Radio,
    ButtonGroup,
    Button } from 'react-bootstrap';

class Sidebar extends Component {

    _onOptionChange(option) {
      this.setState({
          option: option
      });
    }

  render() {
    return (
        <div>
            ...
            ...
            ...
            <li>
                  <ButtonGroup vertical block data-toggle="buttons">
                    <Button className="btn btn-block" onClick={this._onOptionChange.bind(this, 'optionA')} active={this.state.option === 'optionA'}>Option A</Button>
                    <Button className="btn btn-block" onClick={this._onOptionChange.bind(this, 'optionB')} active={this.state.option === 'optionB'}>Option B</Button>
                    <Button className="btn btn-block" onClick={this._onOptionChange.bind(this, 'optionC')} active={this.state.option === 'optionC'}>Option C</Button>
                  </ButtonGroup>
            </li>
            ...
            ...
            ...
        </div>
    );
  }
}

export default Sidebar;

import React，{Component}来自'React'；
从“类名称”导入类名称；
从“../../core/history”导入历史记录；
进口{
电台，
按钮组，
按钮}来自“反应引导”；
类边栏扩展组件{
_onOptionChange（选项）{
这是我的国家({
选项：选项
});
}
render（）{
返回(
...
...
...

方案A
方案B
备选案文C

...
...
...
);
}
}
导出默认边栏；

page.js：

import React, { PropTypes } from 'react';
import { PageHeader } from 'react-bootstrap';

const title = 'Page';

function displayPage(props, context) {
  context.setTitle(title);
  return (
    <div>
      <div className="row">
        <div className="col-lg-12">
          <PageHeader>Title</PageHeader>
        </div>
        <div className="col-lg-6">

        { value of selected radio button }

        </div>
      </div>
    </div>
  );
}

displayPage.contextTypes = { setTitle: PropTypes.func.isRequired };
export default displayPage;

import React，{PropTypes}来自'React'；
从'react bootstrap'导入{PageHeader}；
常量标题='第页'；
功能显示页面（道具、上下文）{
上下文。设置标题（标题）；
返回(
标题
{所选单选按钮的值}
);
}
displayPage.contextTypes={setTitle:PropTypes.func.isRequired}；
导出默认显示页面；

如何返回所选值？谢谢

来自：

状态包含特定于此组件的数据，这些数据可能会随时间而更改

在

侧栏

组件中，单击按钮将通过调用

this.setState（{…}）

更改侧栏的内部状态

设计组件时，请考虑使用：

从概念上讲，组件类似于JavaScript函数。它们接受任意输入（称为“道具””），并返回描述屏幕上应显示内容的React元素

因此，在您的例子中，我认为侧边栏是一个显示选项列表的组件，并接收回调函数作为其道具。通过单击其中一个按钮，将从

侧栏

组件调用回调函数，并允许您通知包含该按钮的组件（父组件）：

class SomethingThatUsesSidebar extends Component {
  onSidebarOptionSelect(option) {
      console.log(option);
  }

  render() {
    return (
        <div>
           <Sidebar onOptionSelect={this.onSidebarOptionSelect.bind(this)} />
        </div>
    );
  }
}

从：