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

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

但是，我不明白的是，我的父组件如何重新输入我筛选的新值？我希望在屏幕上呈现filteredObjects的值

这是我的父组件

var CommentBox=React.createClass({
displayName:'CommentBox'，
getInitialState:函数（）{
返回{
responseText:[]
}
},
componentDidMount:function（）{
var self=这个；
fetch.get（url）.then（函数（响应）{
self.setState（{responseText:response.data.logs}）；
}).catch（函数（错误）{
console.log（错误）；
});
},
render:function（）{
让msg=this.state.responseText.map（（m，i）=>{m.timestamp}）；
返回(
时间戳
{msg}
);
}
});

搜索栏组件代码如下所示

var SearchBar=React.createClass({
getInitialState:函数（）{
返回{findQuery:''}；
},
onUpdate:函数（事件）{
this.setState（{findQuery:event.target.value}）；
var filteredObjects=this.props.logs.filter（函数（obj）{
var匹配=假；
对象。键（obj）。一些（函数（键）{
if（obj[key].indexOf（event.target.value）>-1）{
匹配=真；
返回true；
}
});
返回匹配；
});
},
render:function（）{
var value=this.state.findQuery；
返回；
}
});

这里有一个解决方案，它将匹配的对象添加到父状态中，并将更新它的方法作为道具传递给子状态。从这里，您应该能够使用

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 CommentBox=React.createClass({
displayName:'CommentBox'，
getInitialState:函数（）{
返回{
所有答复：[]，
过滤器响应：[]
}
},
updateFiltered:函数（查询）{
var filteredObjects=this.state.filteredResponses.filter（函数（obj）{
var匹配=假；
对象。键（obj）。一些（函数（键）{
if（obj[key].indexOf（event.target.value）>-1）{
匹配=真；
返回true；
}
});
返回匹配；
});
this.setState（{filteredResponses:filteredObjects））；
},
componentDidMount:function（）{
var self=这个；
fetch.get（url）.then（函数（响应）{
self.setState（{allResponses:response.data.logs}）；
}).catch（函数（错误）{
console.log（错误）；
});
},
render:function（）{
const responses=this.state.filteredResponses.length？this.state.filteredResponses:this.state.allResponses；
const msg=responses.map（（m，i）=>{m.timestamp}）；
返回(
时间戳
{msg}
);
}
});

孩子

var SearchBar=React.createClass({
getInitialState:函数（）{
返回{findQuery:''}；
},
onUpdate:函数（事件）{
this.setState（{findQuery:event.target.value}）；
this.props.updateFiltered（event.target.value）；
},
render:function（）{
var value=this.state.findQuery；
返回；
}
});

这里有一个解决方案，它将匹配的对象添加到父状态，并将更新它的方法作为道具传递给子状态。从这里，您应该能够使用

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 CommentBox=React.createClass({
displayName:'CommentBox'，
getInitialState:函数（）{
返回{
所有答复：[]，
过滤器响应：[]
}
},
updateFiltered:函数（查询）{
var filteredObjects=this.state.filteredResponses.filter（函数（obj）{
var匹配=假；
对象。键（obj）。一些（函数（键）{
if（obj[key].indexOf（event.target.value）>-1）{
匹配=真；
返回true；
}
});
返回匹配；
});
this.setState（{filteredResponses:filteredObjects））；
},
componentDidMount:function（）{
var self=这个；
fetch.get（url）.then（函数（响应）{
self.setState（{allResponses:response.data.logs}）；
}).catch（函数（错误）{
console.log（错误）；
});
},
render:function（）{
const responses=this.state.filteredResponses.length？this.state.filteredResponses:this.state.allResponses；
const msg=responses.map（（m，i）=>{m.timestamp}）；
返回(
时间戳
{msg}
);
}
});

孩子

var SearchBar=React.createClass({
getInitialState:函数（）{
返回{findQuery:''}；
},
onUpdate:函数（事件）{
this.setState（{findQuery:event.target.value}）；
this.props.updateFiltered（event.target.value）；
},
render:function（）{
var value=this.state.findQuery；
返回；
}
});

刚刚注意到，如果它不起作用，您可能需要像这样绑定传递的helper函数：

updateMatched={this.updateMatched.bind（this）}

。如果是这种情况，请告诉我，我会更新答案。它实际上调用的this.update与您以前编写的代码匹配。但是，它不会更新网页，因为msg是更新的。因此我不确定如何更新{msg}我们在updateMatched方法中得到了匹配的新值。通过您所做的更改，this.updateMatched.bind（this），它也不起作用，我在控制台中看到了一个警告：bind（）。我还想知道上面的代码，当我在文本框中键入时，字符显示至少需要2秒钟。它很慢。它不是