Question

所以我基本上有这个Home组件，它有一个SearchForm组件和一个PostBox组件，可以显示来自API的今天的数据。

var Home = React.createClass({
  handleSubmitSearch: function (e) {
    e.preventDefault();
    // change the URL
  },
  render: function () {
    return (
      <div className="home">
        <SearchForm
          onSubmitSearch={this.handleSubmitSearch} />
        <PostBox
          url="http://localhost:3000/posts/today"
          pollInterval={2000} />
      </div>
    )
  }
});

问题是，当SearchForm中的提交按钮被触发时，我希望通过向PostBox等其他API发送请求而不是显示今天的结果，将结果显示为http://localhost:3000/posts/search/query数据。我的问题是，如何更改PostBox更改的handleSubmitSearch()上的网址道具？

Answer 1

在这种情况下，我会将url置于状态并在提交表单时进行更改。

var Home = React.createClass({
  getInitialState: function() {
    return {url: 'http://localhost:3000/posts/today'};
  },
  handleSubmitSearch: function (e) {
    e.preventDefault();
    var value = ''; // TODO: get value that you want
    this.setState({
      url: 'http://localhost:3000/posts/' + value,
    });
  },
  render: function () {
    return (
      <div className="home">
        <SearchForm
          onSubmitSearch={this.handleSubmitSearch} />
        <PostBox
          url={this.state.url}
          pollInterval={2000} />
      </div>
    )
  }
});

改变道具价值

1 个答案: