动态地将参数传递给react js app上的web服务

Question

我有两个下拉列表，折扣类型和优惠类型，折扣类型返回四个元素，所以我想要做的是例如，如果我从该下拉列表中选择选项编号2，然后调用填充了“选择类型”下拉列表的URL index，在这种情况下为'2'，因为现在提供类型返回all，因为我正在使用以下带来全部的URL：http://xxxxxx:8080/services/OfferType/2而不是getAll我想要将Offer Type Dropdown的索引传递给有这样的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> ); } }

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

@supports (-webkit-overflow-scrolling: touch) {}

这是折扣类型服务的回复：

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

Answer 1

您可以从fetch或handleChangeDiscountType致电handleChangeOfferType，就像在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 });
    });
}