Question

我正在使用包含信息的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>

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

Answer 1

我认为你使用州是正确的。你写道，＆＃34;我希望这个将为点击的项目＆＃34;生成大小。但目前还不清楚你所展示的代码是否进行了初始点击。假设它确实如此，您可以按如下方式更改处理程序：

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（...）。

获取JSON信息到Material-UI dialoge

1 个答案: