Question

我有一个reactJS应用程序，可以从服务中查找条形码。如果在服务上找不到条形码，则会向用户显示错误消息，还会呈现一个输入框和一个按钮，并提示用户手动输入条形码。这是我正在执行的代码：

import React from 'react';
import '../styles/app.css';

class Lookupbarcode extends React.Component {

constructor(props) {
    super(props);  
    this.state = {
        barcode: '',
    };
} 

barcodeLookup(passedBarcode) {
    let currentComponent = this;

    let url = "https://cors-anywhere.herokuapp.com/http://api.barcodelookup.com/v2/products?barcode=" + passedBarcode + "&key=mj1pm32ylcctxj1byaia85n9dk2d4i";        
    const options = { method: 'GET' }; 

    currentComponent.setState({ barcode: passedBarcode });

    fetch( url, options)
    .then(function(response) {
        return response.json();
    })
    .then(function(myJson) {
        if (myJson == undefined) 
        {
            console.log("fetch failed")
        } 
        else 
        {     
            //inspect the data that the WebAPI returned
            var product_string = encodeURI(myJson.products[0].product_name);
            location.href="./ebaylookup?" + product_string + "&" + passedBarcode;
        }
    }); 
}

componentWillMount() {
    var barcodeParm = this.props.location.search.substring(1);
    this.barcodeLookup(barcodeParm);
}

manuallLookup() {        
    var manualBarCode = document.getElementById("manualBarcode").value;
    console.log("manual lookup: ", manualBarCode);
    this.barcodeLookup(manualBarCode);
}

render() {     

        return (
            <div>
                <div>
                    <label id="errorFont">Barcode {this.state.barcode} was not found by our barcode service.  You can re-scan your barcode or enter a barcode below</label>
                </div>
                <div>
                    <button className="btnStartScan"
                        type='button'     
                        onClick={() => { 
                            location.href = ('/newscan') 
                        }}>
                        Re-Scan
                    </button>
                </div>
                <div>
                    <center><label className="appDescription">OR</label></center>
                </div>
                <div id="errorDivInput">
                    <center><input className="revisedProductName" id="manualBarcode"/></center><br />
                </div>
                <div>
                    <button className="btnStartScan" onClick={this.manuallLookup}>
                        Manually Lookup
                    </button>
                </div>
            </div>
        );
}
}

export default Lookupbarcode;

用户可以选择单击一个按钮，该按钮将转到另一个页面（/ newscan）或在输入框中手动输入条形码。如果用户在输入框中输入条形码并单击“手动查找”按钮，我将执行一个名为manualLookup的功能。

manualLookup应该获取用户输入的条形码的值，并将该值传递给功能BarcodeLookup，以查看在条形码服务中是否找到了手动输入的条形码。

执行代码时，手动输入条形码，然后单击“手动查找”按钮，我在控制台日志中得到以下错误消息：

未捕获的TypeError：无法读取未定义的属性'barcodeLookup'

导致错误的行是这样的：

this.barcodeLookup（manualBarCode）;

当我查看控制台日志时，看到的是在manualLookup函数中生成的：

manual lookup:  13131313131313131312

那么，当我能够以完全相同的方式在componentWillMount（）中引用它时，为什么为什么我无法引用this.barcodeLookup（）？

感谢您的帮助。

Answer 1

您将需要在构造函数中绑定manuallLookup和barcodeLookup。这样做对于尝试在其中引用this的任何组件方法都是必要的。

所以您的构造函数应如下所示：

constructor(props) {
    super(props);  
    this.state = {
        barcode: '',
    };
    this.barcodeLookup = this.barcodeLookup.bind(this);
    this.manuallLookup = this.manuallLookup.bind(this);
}

reactJS和在渲染的输入框中获取价值

1 个答案: