将子组件创建的过滤objects/arrays显示到父组件中

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

这里有一个解决方案，将匹配的 objects 添加到 parents 状态，并传递一个方法将其更新为 child 的 prop。从这里开始，您应该能够使用 this.state.filteredResponses 更新 msg 并显示数据。

Parent

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>
  );
}
});

Child

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} />;
  }
});

将子组件创建的过滤objects/arrays显示到父组件中

Display filtered objects/arrays created by child component into the parent component

reactjs

react-jsx