React＆Bootstrap：返回所选单选按钮的值

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

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

我怎么能返回选定值？谢谢！

来源

2017-03-05 jjjayn

基本上，你需要有一个具有两个部件里面的一些容器组件 - 侧边栏，你需要选择的值来填充的。然后让容器处理回调并通过道具传递值。 –

从React docs：

状态包含特定于该组件，其可以随时间改变的数据。

在你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() { ... } 
}

来源

2017-03-05 20:25:51

React＆Bootstrap：返回所选单选按钮的值

回答

相关问题