Question

我尝试构建一些“google-like-search-imput”页面 - 在输入更改时，切换到结果页面并显示所有搜索结果。

但是，如果我按任意键 - 我跳转到结果页面（＃/ results），我丢失了第一个输入的字符？

有人提示，我该如何解决这个问题？

class Home extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      query: ''
    };
    this.updateInputValue = this.updateInputValue.bind(this);
  }
  updateInputValue(event) {
    this.setState({query: event.target.value});
    console.log('event ' + event.target.value);
    this.props.history.push('/search');
    // history.push('/search')
    // this.context.router.push('/');
  }

  render() {
    var query = this.state.query;
    return (
      <article>
        <SearchForm query={query} onChange={this.updateInputValue} />
      </article>
    )
  }
}

感谢您的帮助

Answer 1

这可能是因为当您执行this.props.history.push('/search');主页组件卸载并失去状态时。您需要将query存储在某些外部状态（如redux）中，或者如果您使用React-Router 4，也可以使用location state.

执行此操作

reactjs输入onChange switchRoute但丢失了第一个字符

1 个答案: