Страница перемещается после ввода нажмите клавишу ввода - PullRequest
Новая
       11

Страница перемещается после ввода нажмите клавишу ввода

0 голосов
/ 16 мая 2018

У нас есть странная ситуация, когда страница обновляется нажатием клавиши ввода, но не всегда. У нас есть модал, который содержит ввод текста. Когда вы вводите что-то в это и, не отвлекаясь от ввода, нажимаете ввод, переходите по странице, т.е. у нас есть URL: домен / # / clientInfo после нажатия клавиши ввода это становится, домен / ввод .id = input.value # / clientInfo . Я зарегистрировал submitMethods и все методы onClick, но ни один из них не вызывается. Я попытался добавить:

onKeyPress = {(e) => e.preventDefault ()

на элементе ввода, и это остановило навигацию. У меня вопрос, как я могу дальше отлаживать причины этого события навигации?

Edit:

Элемент ввода находится внутри элемента формы. Метод submit не вызывается, я добавил журналы для отправки метода и использовал параметр консоли разработчика для сохранения журнала, но не видел журналов. Однако, если я отправляю форму через кнопку сохранения, вызывается метод отправки, и он не переходит на загадочную страницу. Еще одна вещь, когда вы переходите на другую страницу с помощью ввода, нажмите и в конечном итоге наберите domain / input.id = input.value , затем повторите те же действия во второй раз, но введите значение на входе то же, что и предыдущий, навигации не происходит.

1 Ответ

0 голосов
/ 17 мая 2018

Так что я подозреваю, что ваш элемент формы должен выглядеть так (в очень простом виде) 

export default class FooForm extends Component {
  constructor(props) {
    super(props);
    this.state = { inputValue = this.props.fooValue };
  }

  handleSubmit = (event) => {
    event.preventDefault();
    this.props.FooAction(event);
  }

  onInputChange = (event) => this.setState(() => ({ inputValue: event.target.value }))
  render() {
    return (
      <form onSubmit={ this.handleSubmit }>
        <input value={ this.state.inputValue } onChange={ this.onInputChange } />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

таким образом, когда вы отправляете форму, она не выполняет никаких действий по умолчанию, специфичных для формыи давайте просто сделаем то, что вы явно говорите, чтобы сделать

...