javascript - 在react js应用程序上动态地将参数传递给Web服务

Question

我有两个下拉列表，折扣类型和优惠类型，折扣类型返回四个元素，因此我想要做的是，例如，如果我从该下拉列表中选择选项号 2，然后调用使用所选选项填充优惠类型下拉列表的 URL索引，在本例中为“2”，因为现在优惠类型返回全部，因为我使用以下 URL 来返回全部:http://xxxxxx:8080/services/OfferType/getAll 但是我想传递 Offer Type Dropdown 的索引而不是 getAll 以获得类似的内容 http://xxxxxx:8080/services/OfferType/2

有关如何执行此操作的任何帮助，因为我没有，您可以在下面找到我当前的代码:

import React from 'react';

import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
import Divider from 'material-ui/Divider';

import cr from '../styles/general.css';

export default class ExampleDropdown extends React.Component {

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

    this.renderDiscountTypeOptions = this.renderDiscountTypeOptions.bind(this);
    this.renderOfferTypeOptions = this.renderOfferTypeOptions.bind(this);

    this.handleChangeDiscountType = this.handleChangeDiscountType.bind(this);
    this.handleChangeOfferType = this.handleChangeOfferType.bind(this);

  }

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

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

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

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

        this.setState({
          DiscountTypeData: findResponse.discountTypes
        });
      });
  }

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

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

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

  renderDiscountTypeOptions() {
    return this.state.DiscountTypeData.map((dt, i) => {
      return (
        <MenuItem
          key={i}
          value={dt.text}
          primaryText={dt.text} />
      );
    });
  }

  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.boton}>
          <Divider/>
          <br/>
        </div>
          <div>
            <DropDownMenu
              value={this.state.DiscountTypeState}
              onChange={this.handleChangeDiscountType}>
              <MenuItem value={''} primaryText={'Select discount type'} />
              {this.renderDiscountTypeOptions()}
            </DropDownMenu>
            <br/>
            <DropDownMenu
              value={this.state.OfferTypeState}
              onChange={this.handleChangeOfferType}>
              <MenuItem value={''} primaryText={'Select offer type'} />
              {this.renderOfferTypeOptions()}
            </DropDownMenu>
          </div>
      </div>
    );
  }
}

这是折扣类型服务的响应:

因此，如果我选择值为“3”的“批量折扣”，那么我想将该 3 传递到优惠类型 URL。

Answer 1

您可以从 handleChangeDiscountType 或 handleChangeOfferType 调用 fetch，就像在 componentDidMount 中调用一样。示例:

handleChangeDiscountType(event, index, value) {
   fetch('http://xxxxxx:8080/services/DiscountType/' + value.id)
    .then(Response => Response.json())
    .then(findResponse => {
        console.log(findResponse);
        this.setState({ DiscountTypeState: findResponse });
    });
}