質問編集履歴

コードの改善

2019/12/07 05:33

投稿

Yhaya

スコア439

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -203,3 +203,187 @@
 }
 ```
+---
+## 追記
+親要素からpropsとして渡して制御するように変更してみました。親要素に新たに各PaperFolder要素が選択されているかされていないかを知るための配列(`folderSelectedList`)を導入してこれをpropsとして子要素に渡すようにしてみたのですがうまく動作しません。どこがおかしいのでしょう？
+```javascript
+class SideBar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: true,
+      numFolders: 0,
+      folders: [],
+      folderSelectedList: [],
+      selectedIdx: null,  // store the index of folder selected or null
+    };
+    this.handleDrawer = this.handleDrawer.bind(this);
+    this.createFolder = this.createFolder.bind(this);
+    this.handleSelectedIdx = this.handleSelectedIdx.bind(this);
+  }
+  handleSelectedIdx(message) {
+    var folderSelectedList = this.state.folderSelectedList.slice();
+    if (this.state.selectedIdx !== null) {
+      folderSelectedList[this.state.selectedIdx] = false;
+    }
+    this.setState({selectedIdx: message.selectedIdx});
+    folderSelectedList[this.state.selectedIdx] = true;
+    this.setState({folderSelectedList: folderSelectedList});
+  }
+  createFolder() {
+    this.setState({
+      folderSelectedList: this.state.folderSelectedList.concat(false),
+      folders: this.state.folders.concat(
+        <PaperFolder
+          key={this.state.numFolders}
+          index={this.state.numFolders}
+          isSelected={this.state.folderSelectedList[this.state.numFolders]}
+          deleteFunc={this.deleteFolder.bind(this)}
+          callback={this.handleSelectedIdx}
+        />
+      )
+    });
+    this.setState({ numFolders: this.state.numFolders + 1 });
+  }
+  // ...
+}
+```
+```javascript
+class PaperFolder extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: "Untitled",
+    }
+    this.handleClose = this.handleClose.bind(this);
+    this.select = this.select.bind(this);
+  }
+  select() {
+    // this.setState({selected: !this.state.selected});
+    this.props.callback({'selectedIdx': this.props.index})
+  }
+  render() {
+    const { classes } = this.props;
+    const folderStyle = clsx({
+      [classes.folder]: true,
+      [classes.selected]: this.props.isSelected
+    });
+    // TODO: move <List> out of PaperFolder component
+    return (
+      <List className={classes.folder} onClick={this.select}>
+        <ListItem
+          className={folderStyle}
+          onClick={this.handleListClick}
+        >
+        </ListItem>
+      </List>
+    )
+  }
+}
+```