Next.js从Textinput表单提交的浅层路由

Question

我在Next.js和React中相对较新，

我想根据here中Next.js示例的提交形式，基于文本输入状态设置浅层url。

尝试修改它以使用表单：

  render() {
    const {initialText, router} = this.props
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }

但是我仍然无法将此this.state.value传输到{ router }上的this.props / handleSubmit上，因此它将显示在浏览器路由中……

如果有人可以给我提示，请继续。.谢谢。.

其余代码大致类似于该示例：

  static getInitialProps({ res }) {
    if (res) {
      return { initialText: 'none' }
    }
      text = this.state.value;
    return {
        initialText: text
    }
  }

    constructor (props) {
        super(props);
        this.state = {value: 'none'};
    }

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

  handleSubmit = (event) => {
    const { router } = this.props

    const currentText = router.query.text
      ? router.query.text
      : 'none'
    const href = `/?text=${currentText}`
    Router.push(href, href, { shallow: true })
  }

Answer 1

要使用getInitialProps()，您需要使用此页面，因为它不能在子组件中使用。因此，如果在子组件中使用initialText，则getInitialProps()将始终是未定义的。在子组件中，您需要使用componentDidMount()并将initialText设置为状态。

因此，考虑到您已经在页面，文件夹中定义了此组件，它应该可以工作。但是，如果您将以下内容定义为子组件，则它将不起作用。

static getInitialProps({ res }) {
    if (res) {
      return { initialText: 'none' }
    }
      text = this.state.value;
    return {
        initialText: text
    }
  }

    constructor (props) {
        super(props);
        this.state = {value: 'none'};
    }

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

  handleSubmit = (event) => {
    const { router } = this.props

    const currentText = router.query.text
      ? router.query.text
      : 'none'
    const href = `/?text=${currentText}`
    Router.push(href, href, { shallow: true })
  }