获取 JSON 信息到 Material-UI 对话框答案

【问题标题】：Getting JSON info to Material-UI dialoge获取 JSON 信息到 Material-UI 对话框
【发布时间】：2016-04-04 13:00:44
【问题描述】：

我正在处理带有信息的 JSON 文件。我也正在使用 Material-UI 对它们进行样式化和渲染。我有一个 JSON 文件，看起来像这样：

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

等等。一件物品可以有不止一种尺寸和不同的尺寸代码。我正在使用来自 Material-UI 的对话框和 React。我想在对话框中为单击的项目生成一个简单的下拉菜单，其中包含所有代码大小。在这里，我将向您展示如何将有关项目的信息获取到对话框：

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 文件中获得的所有项目。这只是一个测试，但我希望这个会为点击的项目生成大小。

我还有另一种从 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>

任何提示如何解决我的要求？

【问题讨论】：

标签： javascript json reactjs material-ui

【解决方案1】：

我认为您在使用状态方面走在了正确的轨道上。您写道，“我希望这个会为点击的项目生成大小”，但目前还不清楚您显示的代码是否进行了初始点击。假设它确实如此，您可以按如下方式更改您的处理程序：

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

然后在尺寸下拉的渲染方法中，你会做 sizes.map(...) 或者如果你使用 Set type for sizes，Sizes.forEach(...)。

【讨论】：