如果我正在使用组件，如何将焦点更改为下一个输入？

Question

我需要通过按 Enter 键来模拟 Tab 键，以便将焦点从第一个输入切换到第二个。

如果我只使用基本的相邻输入，我可以实现这个，但是当使用组件时 - 我失败了。为了您的方便，我在 codepen 上提供了以下代码 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();
                  }
             })
        }
    };

如果我正在使用组件，如何将焦点更改为下一个输入？

How to change focus to the next input if I am using components?

javascript

ref

reactjs