Question

我开始用reactjs开发。

实际上，当显示页面时，会显示来自ajax调用的数据。

var WebSite = React.createClass({

  getInitialState: function() {
    return {display: true };
  },
  render: function() {

    if (this.state.display==false) return null;
    else return (
      <tr>
          <td>{this.props.website.webSite}</td>
          <td>{this.props.website.date}</td>
          <td>{this.props.website.visits}</td>
      </tr>
    );
  }
});

var WebSiteTable = React.createClass({

  render: function() {

    var rows = [];
    this.props.websites.forEach(function(website) {
      rows.push(
        <WebSite website={website} key={website.website} />);
    });

    return (
      <table className="table table-striped">
          <thead>
              <tr>
                  <th>Website</th>
                  <th>Date</th>
                  <th>Visits</th>
              </tr>
          </thead>
          <tbody>{rows}</tbody>
      </table>
    );
  }
});

var App = React.createClass({

  searchWebSiteFromDate: function() {

    var self = this;
    $.ajax({
        url: "http://localhost:8080/rest/report/statwebsiteg",
      }).then(function(data) {
        self.setState({ websites: data});
      });

  },

  getInitialState: function() {
    return { websites: [] };
  },

  componentDidMount: function() {
    this.searchWebSiteFromDate();
  },

  render() {
    return ( <WebSiteTable websites={this.state.websites} /> );
  }
});

ReactDOM.render(<App />, document.getElementById('root') );

工作正常，而不是在加载页面时直接显示数据，我想显示一个输入框。在丢失的焦点上，我想进行类似的搜索，然后是当前的搜索（添加输入框）并显示结果。

我使用此代码更改了应用程序

var App = React.createClass({

    getInitialState: function () {
        return {websites: []};
    },

    onBlur: function () {
        var self = this;
        $.ajax({
            url: "http://localhost:8080/rest/report/statwebsiteg",
        }).then(function (data) {
            self.setState({websites: data});
        });
    },
    render: function () {

        return <input type="text" onBlur={ this.onBlur } placeholder="Enter your date here."/>;
    }

});

查询已完成......但未显示任何内容。

Answer 1

除非您的示例不完整，否则除非您实际呈现数据，否则您将看不到数据。

render: function () {
    return (
        <section>
            <input type="text" onBlur={ this.onBlur } placeholder="Enter your date here."/>
            <WebSiteTable websites={this.state.websites} />
        </section>

    );
}

添加输入搜索并执行ajax调用，不显示任何内容

1 个答案: