將子組件創建的過濾對象/數組顯示到父組件中

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