Question

我有一个从Web服务填充的下拉列表，我想要的是根据所做的选择显示一些文本。例如，下拉列表中的第一个选项是购买n并保存m ，因此在ap标签中我想显示买2并节省1.5美元我知道这对于交换机是有用的数组的位置将是我的＆＃34; CASE＆＃34;为了知道要显示什么，但我是新的反应和编程所以我需要帮助..

import React from 'react';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem'; 
import cr from '../styles/general.css';

export default class Example extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      OfferTypeData: [],
      OfferTypeState: '',
    };
    this.handleChange = this.handleChange.bind(this);
    this.renderOfferTypeOptions = this.renderOfferTypeOptions.bind(this);
  }

  componentDidMount() {
    const offerTypeWS = 'http://localhost:8080/services/OfferType/getAll';

    fetch(offerTypeWS)
      .then(Response => Response.json())
      .then(findResponse => {
        console.log(findResponse);

        this.setState({
          OfferTypeData: findResponse
        });
      });
  }

  handleChange(event, index, value) {this.setState({value});}

  handleChangeDiscountType(event, index, value) {
    this.setState({ OfferTypeState: (value) });
  }

  renderOfferTypeOptions() {
    return this.state.OfferTypeData.map((dt, i) => {
      return (
        <MenuItem
          key={i}
          value={dt.offerTypeDesc}
          primaryText={dt.offerTypeDesc} />
      );
    });
  }

  render() {

    return (
      <div className={cr.container}>
        <div className={cr.rows}>
          <div>
            <DropDownMenu
              value={this.state.OfferTypeState}
              onChange={this.handleChangeDiscountType}>
              <MenuItem value={''} primaryText={'Select Offer Type'} />
              {this.renderOfferTypeOptions()}
            </DropDownMenu>
            <br/>
            <p>{DISPLAY SOME TEXT HERE}</p>
          </div>
        </div>
      </div>
    );
  }
}

提前致谢！

问候。

Answer 1

创建一个将回调传递给下拉列表的组件，此回调将更新容器的状态，该容器将依次设置显示的道具。这在React中非常常见，并且是组合模式如何工作的基础。如果需要在两个组件之间共享数据，只需将它们放入容器中，然后将状态提升到父组件即可。这些组件通常称为容器，并且有大量文档。

这是一个很好的起点：https://reactjs.org/docs/lifting-state-up.html

粗略的布局就是这样的。

class Container extends React.Component {
  constructor(props) {
    super(props);

    // Don't forget to bind the handler to the correct context
    this.changeText = this.changeText.bind(this);
  }

  changeText(text) {
    this.setState({text: text});
  }

  render() {
    return (
      <DropDown callback={this.changeText} />
      <Display text={this.state.text} />
    )
  }
}

显示组件......

const Display = (props) => (
  <p>{this.props.text}</p>
)

根据开关情况显示一些文本

1 个答案: