在 Material-UI 对话中获取 JSON 信息

Question

我正在处理 JSON 包含信息的文件。我正在使用 Material-UI React 来设置样式和渲染它们。我有一些 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>

有什么提示可以解决我所要求的问题吗？

Answer 1

我认为您在使用状态方面走在正确的轨道上。您写道，"I want that this one will generete sizes for clicked item" 但不清楚您显示的代码是否执行了初始点击。假设它确实如此，您可以按如下方式更改您的处理程序：

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 类型，Sizes.forEach(...)。

在 Material-UI 对话中获取 JSON 信息

Getting JSON info to Material-UI dialoge

javascript

json

reactjs

material-ui