Material-UIダイアログへのJSON情報の取得

Question

私はJSONファイルの情報を使って作業しています。私はまた、Material-UIに反応してスタイルとレンダリングを行っています。私はこのようなJSONファイルをいくつか持っています：

[{"item":123456", 
    "description":"Jacket", 
    "colors":[{ 
    "code":"blue", 
    "sizes":[{ 
     "code":"L", 

などです。 1つのアイテムは異なるサイズのコードで複数のサイズを持つことができます。 ReactでMaterial-UIのダイアログを使用しています。クリックした項目のダイアログで、すべてのコードサイズの単純なドロップダウンメニューを生成したい。作品

export default class SelectFieldExampleCustomLabel extends React.Component { 

constructor(props) { 
    super(props); 
    this.state = {value: 1}; 
} 

handleChange(event, index, value) { 
    this.setState({value}); 
} 

render() { 
    return (
     <SelectField value={this.state.value} onChange={this.handleChange.bind(this)}> 
      {dataSet.map(tile => (
      <MenuItem value={tile.item} label={tile.item} primaryText={tile.item}></MenuItem> 
      ))} 
     </SelectField> 
    ); 
} 

が、それは私が私のJSONファイルに入った私のすべてのアイテムを取得します：ここで私は、私は、ダイアログに項目についての情報を取得する方法を示しています。それは単なるテストですが、私はこれがクリックされたアイテムのサイズを生成することを望みます。

handleOpen(tile){ 
    this.setState({ 
     open: true, 
     tileTitle: tile.description, 
     tileImg: "img/" + tile.item + ".png", 
     tileCategory: tile.category, 
     tileGender: tile.gender, 
     tileSizes: tile.item 
    }); 
}; 

<Dialog 
        title={this.state.tileTitle} 
        actions={actions} 
        modal={false} 
        open={this.state.open} 
        contentStyle={styles.dialog} 
        onRequestClose={this.handleClose.bind(this)} 
       > 

        <img src={this.state.tileImg} style={styles.dialogImg} /> 
        <div style={styles.textBox}> 
         <h4>{this.state.tileCategory}</h4> 
         <p><b>Gender:</b> {this.state.tileGender}</p> 
         <SelectFieldExampleCustomLabel></SelectFieldExampleCustomLabel> 
        </div> 

       </Dialog> 

任意のヒントは、どのように私は私が求めているものを修正することができます：

は、私はまた、ダイアログにJSONからデータを取得するための別の方法を得ましたか。

Answer 1

あなたは状態を使用して正しい軌道に乗っていると思います。あなたは、 "これはクリックされたアイテムのサイズをgenereteにしたい"と書いていますが、あなたが示したコードが最初のクリックをするかどうかは不明です。次のようにそれはしかし、あなたがあなたのハンドラを変更することができないと仮定すると：

handleChange(event, index, value) { 
    sizes = [] 
    for (colors of dataSet[<index of selected value>].colors { 
    for (size of colors.sizes) { 
     if (! sizes.includes(size) { 
     // Or you could use Set type for sizes and use sizes.add(size) w/o if 
     sizes.push(size) 
     } 
    } 
    } 
    this.setState({ 
    value: value, 
    sizes: sizes, 
    }) 
} 

次にサイズはドロップダウンのためにあなたのrenderメソッドでは、あなたがsizes.map（...）を行うだろうか、サイズのセットタイプを使用する場合、Sizes.forEach（...）。