javascript - 如何使模态停止或继续 onClick 事件

Question

我有一个创建按钮，但我想检查我要创建的东西是否已经存在数据库，如果已经存在，它会弹出一个窗口询问你是否要继续更新它，我使用模态来做

所以不确定发生了什么，每当我单击创建按钮时，在我单击模式弹出窗口上的按钮之前，它已经到达后端

基本上逻辑应该是提交创建->检查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>
    );
}

标签： javascriptreactjs

Answer 1

该checkSkuIfExisted函数是异步的，您需要await在调用它时让其余代码等到结果从后端返回。

因此，在onClick您拥有的功能中：

async onClick() {
    try {
        await this.checkSkuIfExisted();
        ...the rest of your code...
    }
}

在单独的说明中，您modal在单个按钮单击事件上多次设置状态。您应该setState从函数中删除调用checkSkuIfExisted，并让 click 事件处理程序来决定是否需要打开模式。