reactjs - ReactJs 中的搜索表

Question

我创建了一个表并正在对其进行过滤，但是当我清除搜索查询时，表数据不会显示，并且表会卡在查询结果上。SearchBox 是文本框，TableData 是表格，在 Container 中我正在更改 SearchBox 和 TableData 状态。

这是我的代码:

var SearchBox = React.createClass({
  doSearch: function() {
    var query = this.refs.searchInput.getDOMNode().value;
    console.log(query)
    this.props.doSearch(query);
  },
  render: function() {
    return (
      <input
        type="text"
        ref="searchInput"
        placeholder="Search Name"
        value={this.props.query}
        onChange={this.doSearch}
      />
    )
  }
})

var TableData = React.createClass({
  render: function() {
    var rows=[];
    this.props.data.forEach(function(data) {
      rows.push(<tr><td>{data.name}</td><td>{data.roll}</td></tr>)
    });
    return (
      <table>
        <thead>
          <tr>
            <th>Author</th>
            <th>Text</th>
          </tr>
        </thead>
        <tbody>{rows}</tbody>
      </table>
    );
  }
});

var Container = React.createClass({
  componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  doSearch: function(queryText) {
    //get query result
    var queryResult=[];
    this.state.data.forEach(function(person) {
      console.log("person ",person);
      if (person.name.indexOf(queryText) != -1)
        queryResult.push(person);
      console.log("query result ",queryResult);
    });
    debugger;
    this.setState({
      data: queryResult,
      query:queryText

    })
  },
  getInitialState: function() {
    return {
      data:[],
      query:''
    };
  },
  render: function() {
    return(
      <div>
        <div className="row">
          <SearchBox query = {this.state.query} doSearch={this.doSearch} />
        </div>
        <div class="row">
          <TableData data = {this.state.data} />
        </div>
      </div>
    );
  }
});

React.render(
  <Container url="data2.json"/>,
  document.getElementById('searchApplications')
);

Answer 1

在初始状态下，您的doSearch尚未被调用，因此没有发生过滤。当您删除搜索框中的文本值时，将调用 doSearch，它会尝试将 '' 与每个人名进行匹配。这将返回 0 个结果，导致空白表。您可以通过在 doSearch 中的 if 语句中添加一个条件来检查 queryText 是否为空来解决此问题:

doSearch:function(queryText){


  var queryResult=[];
  this.state.data.forEach(function(person){
      console.log("person ",person);
      if(person.name.indexOf(queryText)!=-1 || queryText === '')
        queryResult.push(person);
        console.log("query result ",queryResult);
  });
  debugger;
  this.setState({
      data: queryResult,
      query:queryText
  })
},