React 和 Bootstrap：返回选定单选按钮的值答案

【问题标题】：React & Bootstrap: returning the value of selected radio buttonReact 和 Bootstrap：返回选定单选按钮的值
【发布时间】：2017-03-05 18:08:55
【问题描述】：

我有一个 ButtonGroup 作为导航栏中的单选按钮。我想返回特定页面中选定按钮的值。我没有太多 React 经验，有点迷茫。

我有两个 .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;

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;

如何返回选定的值？谢谢！

【问题讨论】：

基本上，您需要一些容器组件，其中包含两个组件 - 侧边栏和您需要填充所选值的组件。然后让容器处理回调并通过 props 传递值。

标签： javascript twitter-bootstrap reactjs

【解决方案1】：

来自React docs：

状态包含特定于该组件的数据，这些数据可能会随着时间而改变。

在您的Sidebar 组件中，单击按钮将通过调用this.setState({ ... }) 来更改侧边栏的内部状态。

在设计组件时考虑使用props：

从概念上讲，组件就像 JavaScript 函数。它们接受任意输入（称为“props”）并返回描述应该出现在屏幕上的内容的 React 元素。

因此，在您的情况下 - 我会将Sidebar 视为显示选项列表并接收回调函数作为其道具的组件。通过单击其中一个按钮，将从Sidebar 组件调用回调函数，并允许您通知包含单击的组件（父级）：

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

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

在您的Sidebar 组件中，您可以像这样调用回调函数：

class Sidebar extends Component {
    // ...

    _onOptionChange(option) {
        this.props.onOptionSelect(option);
    }

   render() { ... }
}

【讨论】：