Криво работает input на странице с роутером?

Question

[usica]

Многостраничное приложение, на странице, т.е, в дочернем компоненте, который вызывается через роутер, странно работает input, который меняет состояние родительского компонента: после ввода первого символа происходит прокрутка к началу дочернего компонента и фокус из input'а пропадает.
Точно такой же input в родительском компоненте работает нормально. В дочернем без роутера тоже работает.

class App extends Component {
  constructor() {
        super();
        this.state = {
          input:'',
        };
        this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
        this.state.input = event.target.value;
        this.setState({input: this.state.input});
  }
  render() {
    return(
      <div>
      <br /><br /><br /><br /><br /><br />
        <input type=''
                        name='input'
                        value={this.state.input}
                        onChange={this.handleChange}
                        placeholder='основной компонент'
                /><br />
                <Switch>
                  <Route exact path="/" component={() => (
                   <PageIndex input={this.state.input} f={this.handleChange} /> )}/>
               </Switch>
      </div>)
  }
}


const PageIndex = (p) => {
  return (
    <div><hr /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
      <input type=''
                        name='input'
                        value={p.input}
                        onChange={p.f}
                        placeholder='дочерний компонент'
                />
      </div>
  )
}

Проблема именно с вводом текста в инпут. Изменение состояния родителя по клику на кнопку работает без дерганья вверх.
Не могу понять, в чем проблема.

Comments

[Владимир]

this.state.input = event.target.value;
        this.setState({input: this.state.input});

Почитайте как стейт менять в компоненте
https://reactjs.org/docs/state-and-lifecycle.html#...
Ну и если новое пишете, используйте функциональные компоненты и хуки.

[hzzzzl]

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

и тут лучше див какой-нибудь вставить, или просто маргин-топ задать компоненту

[usica]

Владимир, большое спасибо.

[usica]

hzzzzl, да, конечно. Это тестовый пример.

Answer 1

[lnked]

class App extends Component {
  state = {
    input: '',
  };

  handleChange = (event) => {
    event.persist();
    this.setState({ input: event.target.value });
  }

  render() {
    const { input } = this.state;

    return(
      <div>
        <br /><br /><br /><br /><br /><br />
        <input type=''
          name='input'
          value={input}
          onChange={this.handleChange}
          placeholder='основной компонент'
        />
        <br />
        <Switch>
          <Route
            exact
            path="/"
            render={props => (
              <PageIndex {...props} input={input} onChange={this.handleChange} />
            )}
          />
        </Switch>
      </div>
    );
  }
}

const PageIndex = ({ input, onChange }) => {
  return (
    <div>
      <hr /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
      <input
        name='input'
        value={input}
        onChange={onChange}
        placeholder='дочерний компонент'
      />
    </div>
  )
}

Comments

[usica]

Спасибо. Буду разбираться.

Answer 2

[usica]

Ошибка здесь:

<Route exact path="/" component={() => (<PageIndex input={this.state.input} f={this.handleChange} /> )}/>

Правильно так:

<Route exact path="/" render={props => <PageIndex input={this.state.input} f={this.handleChange} />} />