我有一个创建按钮,但是我想检查是否要创建的东西是否已经存在,如果已经存在,它将弹出一个窗口询问您是否要继续更新它,我使用模式做到
所以不确定发生了什么,每当我单击创建按钮时,在单击模式弹出窗口上的按钮之前,它已经到达了后端
基本上,逻辑应该是 提交创建->检查sku是否存在?否->创建sku 是->弹出模式?更新->创建sku,取消->停止创建sku
constructor(props) {
super(props);
this.state = {
skuId: null,
brand: null,
color: null,
size: null,
unitPerCase: null,
vendorSkus: null,
enabledEU: false,
inputSkuExisted: false,
modal: false,
};
this.onClick = this.onClick.bind(this);
this.toggle = this.toggle.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleChange({ target }) {
switch (target.name) {
case "skuId": {
this.setState({skuId: target.value});
break;
}
case "brand": {
this.setState({brand: target.value});
break;
}
case "color": {
this.setState({color: target.value});
break;
}
case "size": {
this.setState({size: target.value});
break;
}
case "unitPerCase": {
this.setState({unitPerCase: target.value});
break;
}
case "vendorSkus": {
this.handleVendorSkus(target.value);
break;
}
}
}
handleVendorSkus(vendorSkusString) {
let vendorSkus = vendorSkusString.split(",");
this.setState({vendorSkus: vendorSkus});
}
async onClick() {
// console.log(this.state.enabledEU);
try {
this.checkSkuIfExisted();
if (this.state.inputSkuExisted) {
this.setState({modal: true});
} else {
console.log(this.state.inputSkuExisted);
this.updateSku();
}
} catch (e) {
this.props.onError(e.toString());
}
}
async checkSkuIfExisted() {
let json = await ServiceClient.makeGetRequest(`api/raw-sku/check/${this.state.skuId}`, null);
this.setState({modal : json.present});
}
async updateSku() {
let response = await ServiceClient.makePutRequest("api/raw-sku/ink", null,
JSON.stringify({
skuId: this.state.skuId,
brand: this.state.brand,
color: this.state.color,
size: this.state.size,
unitPerCase: this.state.unitPerCase,
vendorSkus: this.state.vendorSkus,
enabledEU: this.state.enabledEU ? 1 : 0
}));
if (response.status === 200) {
this.props.onSuccess("Ink Sku created successfully!");
} else {
this.props.onError(response.statusText.toString());
}
this.toggle();
}
toggle() {
this.setState({
modal: !this.state.modal
});
}
render() {
let modal = (<Modal isOpen={this.state.modal}>
<ModalBody>This SKU already created, are you sure want to update it?</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.updateSku}>Update</Button>
<Button color="secondary" onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</Modal>);
return (
<div>
{modal}
<Form>
<FormGroup>
<Label for="skuId">SKU ID</Label>
<Input value={ this.state.skuId } onChange={ this.handleChange }
type="text" name="skuId" id="skuId" placeholder="Sku Id"/>
</FormGroup>
<FormGroup>
<Label for="brand">Brand</Label>
<Input value={ this.state.brand } onChange={ this.handleChange }
type="text" name="brand" id="brand" placeholder="NEOPIGMENT" />
</FormGroup>
<FormGroup>
<Label for="color">Color</Label>
<Input value={ this.state.color } onChange={ this.handleChange }
type="text" name="color" id="color" placeholder="WHITE" />
</FormGroup>
<FormGroup>
<Label for="size">Size</Label>
<Input value={ this.state.size } onChange={ this.handleChange }
type="text" name="size" id="size" placeholder="ONE_QUART" />
</FormGroup>
<FormGroup>
<Label for="unitPerCase">Brand</Label>
<Input value={ this.state.unitPerCase } onChange={ this.handleChange }
type="number" name="unitPerCase" id="unitPerCase" placeholder="unit" />
</FormGroup>
<FormGroup>
<Label for="vendorSkus">VendorSkus</Label>
<Input value={ this.state.vendorSkus } onChange={ this.handleChange }
type="text" name="vendorSkus" id="vendorSkus"
placeholder="V1 or V1,V2" />
</FormGroup>
<FormGroup>
<Label>Region:</Label>
<Label className="sku-checkbox-label">
<Input type="checkbox" name="checkbox_NA" id="checkbox_NA"
checked={true} disabled={true}/>NA</Label>
<Label className="sku-checkbox-label">
<Input type="checkbox" name="checkbox_EU" id="checkbox_EU"
checked={ this.state.enabledEU }
onChange={e => this.setState({enabledEU: !this.state.enabledEU})}/>EU</Label>
</FormGroup>
<Button color="success" onClick={this.onClick}>Submit</Button>
</Form>
</div>
);
}
答案 0 :(得分:0)
checkSkuIfExisted
函数是异步的,调用它时需要await
,以便其余代码等待结果从后端返回。
因此,在onClick
函数中,您可以:
async onClick() {
try {
await this.checkSkuIfExisted();
...the rest of your code...
}
}
在单独的音符上,您在单个按钮单击事件上多次设置modal
状态。您应该从setState
函数中删除checkSkuIfExisted
调用,并让click事件处理程序来确定是否需要打开模式。