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

反应＆amp; Bootstrap：返回所选单选按钮的值

1 个答案: