React＆Bootstrap：返回所選單選按鈕的值

Question

我有一個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;

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;

我怎么能返回所選的值？ 謝謝！

Answer 1

來自React文檔 ：

狀態包含特定於此組件的數據，該數據可能隨時間而變化。

在Sidebar組件中，單擊該按鈕將通過調用this.setState({ ... })來更改補充工具欄的內部狀態。

在設計組件時考慮使用props ：

從概念上講，組件就像JavaScript函數。 它們接受任意輸入（稱為“ 道具 ”）並返回描述屏幕上應顯示內容的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() { ... }
}