javascript - 我可以将 API 中的信息放到另一个页面吗？

Question

标题是我能真正描述的最好的标题，但是，这是我想要做的 Microsoft Paint 版本。如果你们知道怎么做，请随时回复。

这就是它在做什么

这就是我想要它做的事情

抱歉，画得不好，不是最艺术的。

Answer 1

我不确定您要解决的用例是什么，但我假设它与搜索的工作方式类似。即:您在输入字段中输入一些内容，按下提交按钮 -> 隐藏您当前所在的表单并在下一页中显示结果。

伪代码可能如下所示

class Search extends React.Component {
  state = {
    query: "",
    results: null
  }

  handleOnChange = e => {
    this.setState({query: e.target.value})
  }

  formSubmit = () => {
    //do your request to api
       .then(response => this.setState({results: response}))
  }

  render() {
    return(
      this.state.results === null ? (
        <form>
           <input type="text" value={this.state.query} onChange={this.handleOnChange}/>
           <button type="submit" onClick={this.formSubmit}>Submit</button>
        </form>
      ):(
        <div>{this.state.results}</div>
      )
    ) 
  }
}