Javascript TypeError:_this2.input.current.focus不是函数

我有一个组件，我把它命名为发票。在Invoice中，我使用UnderInvoice和SearchProduct组件。发票不足组件涉及一些按钮（产品、客户等）。SearchProduct组件包括两个用于搜索产品的文本框（条形码、名称）和一个用于显示结果的网格。当我点击产品按钮时，会打开一个模式来显示SearchProduct。我希望当模式打开时，关注条形码文本框，我在构造函数中创建ref并将其分配给txtBarcode变量。然后在SearchProduct组件的render（）方法中，我呈现输入并将ref属性设置为等于txtBarcode变量。最后，我在componentDidMount（）方法中调用txtBarcode的当前属性的focus（）。但当我点击产品按钮时，我得到了这个错误：“TypeError:_this2.txtBarcode.current.focus不是一个函数”。什么是我的错？ 我的代码是这样的： 在SearchProduct组件中：

    export default class SearchProduct extends Component {
  constructor(props) {
    super(props);
this.txtBarcode = React.createRef();
}
componentDidMount() {
    setTimeout(() => {
      // console.log("ref", this.txtBarcode);
      this.txtBarcode.current.focus();
    }, 1000);
  }
render() {
return (
        <div className="row">
          <div className="col-6">
    <input
              id="productBarcode"
              ref={this.txtBarcode}
              onChange={this.handleBarcodeChange}
            />
          </div>
<div className="col-6">
    <input
              id="productName"
              onChange={this.handleNameChange}
            />
          </div>
</div>
);
  }
}

productModal = () => {
if (this.state.showProductModal) {
      return (
        <React.Fragment>
          <MDBModal
            isOpen={this.state.showProductModal}
            toggle={() => {
              this.setState({
                showProductModal: !this.state.showProductModal
              });
            }}
          >
            <MDBModalBody>
              <SearchProduct
                getProductData={this.getProductData}
                onCancel={() => this.setState({ showProductModal: false })}
              />
            </MDBModalBody>
          </MDBModal>
        </React.Fragment>
      );
    }
}

render() {
return (
{this.productModal()}
<UnderInvoiceButtons
                productButtonClick={() =>
                  this.setState({ showProductModal: true })
                }
                customerSelected={(e) => this.handleCustomerInvoice(e)}
              />
  );
    }

导出默认类SearchProduct扩展组件{
建造师（道具）{
超级（道具）；
this.txtBarcode=React.createRef（）；
}
componentDidMount（）{
设置超时（（）=>{
//console.log（“ref”，this.txtBarcode）；
这个.txtBarcode.current.focus（）；
}, 1000);
}
render（）{
返回(
);
}
}

在发票组件中：

    export default class SearchProduct extends Component {
  constructor(props) {
    super(props);
this.txtBarcode = React.createRef();
}
componentDidMount() {
    setTimeout(() => {
      // console.log("ref", this.txtBarcode);
      this.txtBarcode.current.focus();
    }, 1000);
  }
render() {
return (
        <div className="row">
          <div className="col-6">
    <input
              id="productBarcode"
              ref={this.txtBarcode}
              onChange={this.handleBarcodeChange}
            />
          </div>
<div className="col-6">
    <input
              id="productName"
              onChange={this.handleNameChange}
            />
          </div>
</div>
);
  }
}

productModal = () => {
if (this.state.showProductModal) {
      return (
        <React.Fragment>
          <MDBModal
            isOpen={this.state.showProductModal}
            toggle={() => {
              this.setState({
                showProductModal: !this.state.showProductModal
              });
            }}
          >
            <MDBModalBody>
              <SearchProduct
                getProductData={this.getProductData}
                onCancel={() => this.setState({ showProductModal: false })}
              />
            </MDBModalBody>
          </MDBModal>
        </React.Fragment>
      );
    }
}

render() {
return (
{this.productModal()}
<UnderInvoiceButtons
                productButtonClick={() =>
                  this.setState({ showProductModal: true })
                }
                customerSelected={(e) => this.handleCustomerInvoice(e)}
              />
  );
    }

productModal=（）=>{
if（this.state.showProductModal）{
返回(
{
这是我的国家({
showProductModal:！this.state.showProductModal
});
}}
>
this.setState（{showProductModal:false}）
/>
);
}
}
render（）{
返回(
{this.productModal（）}
this.setState（{showProductModal:true}）
}
customerSelected={（e）=>this.handleCustomerInvoice（e）}
/>
);
}

您可以在输入上使用

自动对焦

属性…@Lennholm我以前尝试过，它对我不起作用。您是对的，如果问题是我在（现已删除）答案中提到的，而不是您引用的错误，则错误消息会有所不同。很抱歉。请使用演示问题的工具更新您的问题，最好是使用堆栈片段（

[]

工具栏按钮）运行的工具。堆栈代码段支持React，包括JSX。如果

这个.txtBarcode.current

是

输入

元素，我看不出任何原因

聚焦

不会是一个函数。你可以在输入上使用

自动聚焦

属性…@Lennholm我以前试过，它对我不起作用。你说得对，如果问题是我在（现在已删除的）回答中提到的，而不是您引用的错误，则错误消息会有所不同。很抱歉。请使用演示问题的工具更新您的问题，最好是使用堆栈片段（

[]

工具栏按钮）运行的工具。堆栈代码段支持React，包括JSX。如果

这个.txtBarcode.current

是

输入

元素，我看不出任何原因

焦点

不会是一个函数。