我知道这是一个广泛的问题,但我在考虑为所有这些编写逻辑时感到困惑。我在应用程序中有3个主要区域:写区域,笔记区域和笔记类别区域。
| | [][] | notecatagory
|Writearea| [][] | +
| | [][] |
音符类别是一个列表,用户可以在其中添加一个新的类别,这将给他们一个空白的笔记,他们可以填写。 写区域永远不会改变。 因此,每个音符类别需要知道每个音符内的数据,当用户添加另一个音符时,他们会获得一个新的音符页面,但另一个类别的数据仍然存在。当用户单击一个笔记类别时,它会显示该类别的笔记,依此类推。
我的问题是如何存储变量和状态。我最初的想法是拥有一个state1来保存所有笔记的数据,然后用户点击另一个类别,并添加一个带有空白笔记的state2。我认为每个音符都有一个值= {this.state.note1.value},当我调用onKeyDown = {updateNoteData}时,它会被设置。
<input className="note1data" value={this.state.note1.value} onKeyDown=
{updateNoteData} />
updateNoteData(event){
this.setState({note1: event.target.value });
}
我的整体问题是:当用户点击新类别时,我该如何处理?我是否在其中创建了包含一系列音符变量的状态?像这样的东西?
this.state = {note1data: [note1:'', note2:'', note3:'', note4:'']}
因此,当用户添加新的类别时,我可以将其添加为 note2data?
答案 0 :(得分:0)
如果您询问结构如何以下
state: {
noteArray: [{
"id": "note0",
"category": "category0",
"note": "what note data",
},{
"id": "note1",
"category": "category0",
"note": "what note data",
}]
}
每当您想要特定类别时,请过滤对象。 可以随时创建新类别并应用于任何笔记。 便笺类别可以切换任何类别。
对于性能(数据访问),请使用以下
state: {
"note0": {
"id": "note0",
"category": "category0",
"note": "what note data",
}
"note1": {
"id": "note1",
"category": "category0",
"note": "what note data",
}
}
我根据需要使用组合(例如,redux使用对象设置,如果我需要以特定顺序排列的音符,则使用数组选项)。