React＆Bootstrap：選択したラジオボタンの値を返します

Question

私はナビゲーションバーのラジオボタンとしてButtonGroupを持っています。特定のページで選択されたボタンの値を返したいと思います。私は多くのリアクションの経験をしていないし、私は少し失われています。

2つの.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; 

どのように選択した値を返すことができますか？ ありがとう！ React docsから

Answer 1

：

状態が経時的に変化することがあり、このコンポーネントに固有のデータを含みます。あなたのSidebarコンポーネントで

、ボタンをクリックすると、this.setState({ ... })を呼び出すことによって、サイドバーの内部状態を変更します。コンポーネントを設計する際

は propsの使用を考えてみましょう：

は概念的には、コンポーネントは、JavaScriptの機能のようなものです。彼らは任意の入力（ "小道具"）を受け取り、何が画面に表示されるべきかを説明する反応要素を返します。

したがって、私はSidebarをオプションのリストを表示し、その小道具としてコールバック関数を受け取るコンポーネントと考えています。コールバック関数は、ボタンのいずれかをクリックしてSidebarコンポーネントから呼び出されます、そしてあなたは、クリックの含有する成分（親）に通知することができます：あなたのSidebarコンポーネントで

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

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

、あなたがコールバックを呼び出します

class Sidebar extends Component { 
    // ... 

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

    render() { ... } 
}