Question

我有这个组件Home，它使用两种不同类型的数据调用Property组件，如下所示。

<Property
          location={this.props.fetchLocation}
          area={this.props.area}
        />

Property组件将两个数据集都呈现为嵌套列表和不同的div's。我使用第三个组件以清单的形式显示元素，我从Property组件调用它：

<div><ul>{this.props.location.map(item => {
        return(
        <div><Filter {...item} onChange={this.handleChange}/></div>);
      })}</ul></div>

和第二个数据集的div相同。我可以在handleChange中获取选中的列表项：

handleChange(name, checked) {
    console.log(`This ${name} is ${checked ? 'checked' : 'unchecked'}`)
  }

我想知道是否可以将div's中的选中值（即两个列表）打包到一个对象中并发送到Home组件，以便之后过滤搜索结果。

Answer 1

您可以这样做的方法是在Home组件中维护一个状态，然后在检查或取消检查值时从子组件更新它

主页

state: {
   selectedLocations: [],
   selectedAreas: []
}

updateCheckedValues = (key, value, isChecked) => {
   this.setState((prevState) => {
       if(isChecked) {
          return {[key]: prevState[key].concat(value)}
       } else {
          return { [key]: prevState[key].filter(obj => obj !== value)}
       }
   })
}

    <Property
          updateCheckedValues={(key, value, isChecked) => {this.updateCheckedValues(key, value, isChecked)}}
          location={this.props.fetchLocation}
          area={this.props.area}
        />

子：

<div><ul>{this.props.location.map(item => {
    return(
    <div><Filter {...item} onChange={this.handleChange}/></div>);
  })}</ul></div>

handleChange = (key, name, checked) => {
   this.props.updateCheckedValues(key, name, checked);
}

从多个DIV中检索返回值作为React中的一个对象

1 个答案: