多个窗体控件字段的控件焦点

Question

我有一个映射的输入字段列表：

                      <FormControl
                            name={row_index}
                            value={barcode.barcode}
                            placeholder="Barcode - then Enter"
                            onChange={this.onChange}
                            onKeyPress={this._handleKeyPress}
                            disabled={barcode.submitted}
                        />

我目前使用onKeyPress来处理提交：

_handleKeyPress = (e) => {
    if (e.key === 'Enter') {
        const name = e.target.name;
        const barcodes = this.state.barcodes;
        const this_barcode = barcodes[name];

        let apiFormatted = {"barcode": this_barcode.barcode, "uid": this.props.currentSession}
        this.postBarcodeAPI(apiFormatted, name)
    }
}

我试图关注当前输入字段成功提交后的下一个输入字段。React留档有一个示例，用于使用ref={（输入）=手动设置单个输入字段的焦点

编辑

根据Chase的回答，我正在链接到autofocus文档，尽管它在本例中不起作用。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/autofocus




Answer 1

除非您已经设置了一个ref与关键字文本输入1，那么这是行不通的。另一个建议是将所有输入移动到一个单独的组件中，然后您可以使用this.props.children遍历所有输入，并在任何您想要的位置获取输入。

编辑：

您还可以使用自动对焦道具来确定输入是否应该对焦。

Answer 2

我的工作解决方案：

const focusing = index === lastSubmittedIndex + 1 ? true : false;
const refText = focusing || index === 0 ? input => input && input.focus() : null;

                        <FormControl
                            name={row_index}
                            value={barcode.barcode}
                            placeholder="Barcode - then Enter"
                            onChange={this.onChange}
                            onKeyPress={this._handleKeyPress}
                            disabled={barcode.submitted || barcode.apiCalling}
                            inputRef={refText}
                        />

我在代码中更正的内容：1）我应该使用inputRef而不是ref作为引导的FormControl组件，请参见此处。2） 我使用的是伊利亚·塞门诺夫非常简洁的代码。

更新我在页面上有其他按钮，当用户按下按钮并位于页面底部时，页面会跳到顶部。不知道为什么。