Question

我是ReactJS的新手，但最近学到了很多东西。我创建了一个SearchBar React组件，以便我可以过滤我的数组。一旦我开始在输入文本框中输入值，当字符串匹配时，filteredObjects会变小。这很好，而且很有效。

然而，我无法弄清楚我的父组件如何重新渲染我过滤的新值？我希望在屏幕上呈现filteredObjects的值。

这是我的父组件

var CommentBox = React.createClass({
  displayName: 'CommentBox',

  getInitialState: function() {
    return { 
      responseText: []
    }
  },

  componentDidMount: function() {
    var self = this;
    fetch.get(url).then(function (response) {
      self.setState({responseText: response.data.logs});
    }).catch(function (error) {
      console.log(error);
    });
  },

render: function() {
  let msg = this.state.responseText.map((m, i) => <tr key={i}><td>{m.timestamp}</td>);

  return (
    <div>
    <SearchBar logs={this.state.responseText} />
    <table>
      <tbody>
      <tr>
        <th>Timestamp</th>
      </tr>
      {msg}
      </tbody>
    </table>
    </div>
  );
}
});

SearchBar组件代码位于

之下

var SearchBar = React.createClass({
  getInitialState: function() {
    return { findQuery: ''};
  },

  onUpdate: function(event) {
    this.setState({findQuery: event.target.value});

    var filteredObjects = this.props.logs.filter(function(obj) {
      var matched = false;
      Object.keys(obj).some(function(key) {
        if (obj[key].indexOf(event.target.value) > -1) {
          matched = true;
          return true;
        }
      });
      return matched;
    });
  },

  render: function() {
    var value = this.state.findQuery;
    return <input type="text" placeholder="Search..." value={value} onChange={this.onUpdate} />;
  }
});

Answer 1

这是一个将匹配的对象添加到父状态的解决方案，并传递一个方法来将其更新为对孩子的道具。在此处，您应该可以使用this.state.filteredResponses更新msg并显示数据。

父

var CommentBox = React.createClass({

  displayName: 'CommentBox',

  getInitialState: function() {
    return { 
      allResponses: [],
      filteredResponses: []
    }
  },

  updateFiltered: function(query) {
    var filteredObjects = this.state.filteredResponses.filter(function(obj) {
      var matched = false;
      Object.keys(obj).some(function(key) {
        if (obj[key].indexOf(event.target.value) > -1) {
          matched = true;
          return true;
        }
      });
      return matched;
    });

    this.setState({filteredResponses: filteredObjects));
  },

  componentDidMount: function() {
    var self = this;
    fetch.get(url).then(function (response) {
      self.setState({allResponses: response.data.logs});
    }).catch(function (error) {
      console.log(error);
    });
  },

render: function() {
  const responses = this.state.filteredResponses.length ? this.state.filteredResponses : this.state.allResponses;
  const msg = responses.map((m, i) => <tr key={i}><td>{m.timestamp}</td>);

  return (
    <div>
    <SearchBar updateFiltered={this.updateFiltered} />
    <table>
      <tbody>
      <tr>
        <th>Timestamp</th>
      </tr>
      {msg}
      </tbody>
    </table>
    </div>
  );
}
});

子

var SearchBar = React.createClass({
  getInitialState: function() {
    return { findQuery: ''};
  },

  onUpdate: function(event) {
    this.setState({findQuery: event.target.value});
    this.props.updateFiltered(event.target.value);
  },

  render: function() {
    var value = this.state.findQuery;
    return <input type="text" placeholder="Search..." value={value} onChange={this.onUpdate} />;
  }
});

将子组件创建的筛选对象/数组显示到父组件

1 个答案: