Добавить или сфокусироваться на следующем поле ввода при нажатии кнопки ВВОД - PullRequest
Новая
       8

Добавить или сфокусироваться на следующем поле ввода при нажатии кнопки ВВОД

0 голосов
/ 31 января 2019

Я изучаю React и Material-ui.

Я хочу сделать несколько входных полей внутри компонента, число и значение этих полей получаются как реквизиты от родительского компонента.Я добавил функцию для перемещения фокуса, когда пользователь нажимает кнопку «Ввод», или создает новое поле, если это последнее поле.

Текущий код имеет 15 ссылок (я знаю, что это глупо, но я думаю, что это будетне более 15)Проблема в том, что фокус не перемещается в новое поле при его создании.Можете ли вы предложить лучший способ? 

class ResponseInput extends Component {
    componentWillMount() {
        this.refs = [...Array(15)].map(r => React.createRef())
    }

    changeFocus = index => {
        if (index < this.props.inputs.length - 1) {
            this.refs[index + 1].current.focus();
        } else {
            this.props.addInput();
        }
    }

    render() {
        const { inputs, addInput, handleChangeInput } = this.props;

        return (
            <List>
                {inputs.map((item, index) => (
                    <ListItem key={index} >
                        <Input
                            value={item}
                            inputRef={this.refs[index]}
                            onChange={(event) => handleChangeInput (index, event)}
                            onKeyPress= {(event) => {
                                if (event.key === 'Enter') {
                                    this.changeFocus(index);
                                }
                            }}
                            // autoFocus
                        />
                    </ListItem>
                ))}
            </List>
        );
    }
}

Ответы [ 2 ]

0 голосов
/ 31 января 2019

https://codesandbox.io/s/7wojmxv0oq

<Input autoFocus={index+1>originalInputsLength} .../>

Используйте проверку autoFocus={index+1>originalInputsLength}, которая означает, что если длина ввода превышает исходную длину ввода (пользователь добавляет список), затем установите автофокус на вновь созданный<Input/>.

originalInputsLength инициализируется в конструкторе приложения как состояние, затем передается как реквизиты в <ResponseInput inputs={inputs} addInput={this.addInput} originalInputsLength={originalInputsLength}/>

class App extends React.Component {
  constructor(props){
    super(props);
    const inputs = [1, 2, 3, 4, 5];
    this.state = {
      inputs: inputs,
      originalInputsLength: inputs.length,
    };
  }
0 голосов
/ 31 января 2019

Добавление autoFocus={true} к Input должно исправить это. 

render() {
    const { inputs, addInput, handleChangeInput } = this.props;

    return (
        <List>
            {inputs.map((item, index) => (
                <ListItem key={index} >
                    <Input
                        autoFocus={true}
                        value={item}
                        inputRef={this.refs[index]}
                        onChange={(event) => handleChangeInput (index, event)}
                        onKeyPress= {(event) => {
                            if (event.key === 'Enter') {
                                this.changeFocus(index);
                            }
                        }}
                        // autoFocus
                    />
                </ListItem>
            ))}
        </List>
    );
}

Демонстрация на https://codesandbox.io/s/10089vq54l

...