控制多个 FormControl 字段的焦点

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 文档 has an example for manually setting focus on a single input field using ref={(input) => { this.textInput = input; }} />. I have tried using this[‘textInput’+‘1’].focus() (using computed property names，但收到函数无效的错误。

编辑

根据 Chase 的回答，我正在链接到自动对焦文档，although it doesn't work in this case。

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

Answer 1

除非您使用键 textInput1 设置了一个 ref，否则这将不起作用。另一个建议是将所有输入移动到一个单独的组件中，然后您可以使用 this.props.children 遍历所有输入并在您想要的任何位置抓取输入。

编辑：

您还可以使用 autoFocus 属性来确定输入是否应该聚焦。

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) 对于 Bootstrap 的 FormControl 组件 see here，我应该使用 inputRef 而不是 ref。 2) 我正在使用 ilya-semenov 的非常简洁的 .

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

控制多个 FormControl 字段的焦点

Control Focus of Multiple FormControl Fields

reactjs

react-bootstrap