Question

我需要通过按Enter键将焦点从第一个Input更改为第二个来模拟Tab按下。

如果我仅使用基本的相邻输入，则能够实现此功能，但是使用组件时-我会失败。为了方便您，我在下面的代码笔上有以下代码https://codepen.io/irvingwash/pen/YoJpYx

class Input extends React.Component {
    render() {
        return (
            <div className='Input'>
                <input
                    type='text'
                    value={this.props.value}
                    onKeyPress={this.props.onKeyPress}
                />
            </div>
        );
    }
}

class App extends React.Component {
    mimickTabHandler = (event) => {
        if (event.key === 'Enter') {
            console.log('Pressed');
        }
    };

    render() {
        return (
            <div className='App'>
                Hello
                <br />
                <Input value='World' onKeyPress={this.mimickTabHandler} />
                <br />
                // This input must be focused
                <Input value='Universe' />
            </div>
        )
    }
}

Answer 1

您可以尝试类似的方法。尽管它不完整，因为一旦到达最后一个输入，您仍然必须处理该做什么。希望这会有所帮助。

分叉的示例：https://codepen.io/denz-io/pen/OeBWOe

因此，我们基本上只是遍历所有输入，假设您有5个输入，请检查event.target是否为循环中当前项的==并在其旁边的输入上执行.focus（）。

    mimickTabHandler = (event) => {
        if (event.key === 'Enter') {
             let inputsList = Object.values(document.getElementsByTagName("Input"))
             inputsList.forEach((inp, key) => {
                  if (inp == event.target) {
                           inputsList[key + 1].focus();
                  }
             })
        }
    };

如果我使用组件，如何将焦点转移到下一个输入？

1 个答案: