将子组件创建的过滤对象/数组显示到父组件中

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

搜索栏分量代码是下面

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