Как изменить фокус на следующий ввод, если я использую компоненты? - PullRequest
Новая
       23

Как изменить фокус на следующий ввод, если я использую компоненты?

1 голос
/ 07 июля 2019

Мне нужно смоделировать нажатие клавиши Tab, нажав Enter для изменения фокуса с первого входа на второй.

Я могу реализовать это, если я использую только основные смежные входы, но при использовании компонентов - у меня не получается. У меня есть код ниже на 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>
        )
    }
}

1 Ответ

0 голосов
/ 07 июля 2019

Вы можете попробовать что-то вроде этого. Хотя это не завершено, так как вам все равно придется решать, что делать, когда он доберется до последнего ввода. Надеюсь, это поможет.

Пример разветвления: 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();
                  }
             })
        }
    };
...