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)
    }
}

在尝试成功提交当前输入字段后，我正在尝试关注下一个输入字段。反复文档has an example，使用ref={(input) => { this.textInput = input; }} />手动设置对单个输入字段的关注。我尝试使用this[‘textInput’+‘1’].focus()（使用computed property names，但收到的错误是函数无效。

修改

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

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

Answer 1

我的工作解决方案：

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来使用Bootstrap的FormControl组件see here。 2）我使用ilya-semenov非常整洁code。

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

Answer 2

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

编辑：

您还可以使用autoFocus道具来确定是否应该关注输入。

控制多个FormControl字段的焦点

2 个答案: