Question

我知道这是一个广泛的问题，但我在考虑为所有这些编写逻辑时感到困惑。我在应用程序中有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？

Answer 1

如果您询问结构如何以下

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使用对象设置，如果我需要以特定顺序排列的音符，则使用数组选项）。

如何为具有书写区域，笔记区域和笔记类别区域的Web应用程序构建逻辑？

1 个答案: