複数のDIVの戻り値をReactの1つのオブジェクトとして取得

Question

このコンポーネントはHomeであり、以下に示すように2種類のデータを持つPropertyコンポーネントを呼び出します。

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

Property成分は、ネストリストとして、異なるdiv'sにデータセットの両方をレンダリングします。私は、チェックリストの形での要素を表示するために、第三の成分を使用していると私は、AS 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'}`) 
    } 

それは1つのオブジェクトにすなわち、両方のリストの両方div'sから確認の値をパックして、検索をフィルタリングするためにHomeコンポーネントに送信することが可能です場合、私は疑問に思ってその後の結果。

Answer 1

あなたはそれがホームコンポーネントの状態を維持し、その値がオンまたはオフされるたびに、子供からそれを更新することである行うことができる方法

ホーム

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