如何基于多个输入创建数组

Question

我正在尝试创建一个包含一些对象的数组，我正在尝试从多个输入中收集数据。我正在创建一个餐厅菜单，在那里我会有不同的标题，例如早餐、主菜……在每个标题下我会有不同的盘子。

我试图创建一个这样的数组：

menu: [

 [ 'Lunch', 

   [{plate: 'Rice and Beans', description: 'Rice and Beans for Lunch', price: 50.49 }]

 ]

 [ 'Dinner', 

   [{plate: 'Some Dinner', description: 'Dinner Description', price: 35.49 }]

 ]

]

问题是，我如何首先添加标题，在该标题下如何添加板块？

Answer 1

我也想知道怎么做，所以我做了它来练习。我希望它有帮助。import React from 'react';class MenuInput extends React.Component {&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; const {id, handleInput} = this.props;&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Title : <input name="title" onChange={(e) => handleInput(id, e)}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Plate : <input name="plate" onChange={(e) => handleInput(id, e)}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Description : <input name="description" onChange={(e) => handleInput(id, e)}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Price : <input&nbsp; name="price" onChange={(e) => handleInput(id, e)}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }}export default class Menu extends React.Component {&nbsp; &nbsp; state = {&nbsp; &nbsp; &nbsp; &nbsp; inputCount: 1,&nbsp; &nbsp; &nbsp; &nbsp; inputData: [[]],&nbsp; &nbsp; &nbsp; &nbsp; result: []&nbsp; &nbsp; }&nbsp; &nbsp; saveData = (e) => {&nbsp; &nbsp; &nbsp; &nbsp; const {inputData, result} = this.state;&nbsp; &nbsp; &nbsp; &nbsp; inputData.forEach(input => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const {title, plate, description, price} = input;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const findInputIndex = result.findIndex(data => data.indexOf(title) >= 0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (findInputIndex >= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const [menuName, menuList] = result[findInputIndex];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; result[findInputIndex] = [menuName, [...menuList, {plate, description, price}]]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; result.push([title, [{plate, description, price}]])&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; result&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }&nbsp; &nbsp; handleInput = (id, e) => {&nbsp; &nbsp; &nbsp; &nbsp; const {name, value} = e.target;&nbsp; &nbsp; &nbsp; &nbsp; const {inputData} = this.state;&nbsp; &nbsp; &nbsp; &nbsp; inputData[id] = {...inputData[id], [name]: value};&nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inputData&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }&nbsp; &nbsp; addInput = () => {&nbsp; &nbsp; &nbsp; &nbsp; const {inputCount, inputData} = this.state;&nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inputCount: inputCount + 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inputData: [...inputData, []]&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; };&nbsp; &nbsp; getInputList = () => {&nbsp; &nbsp; &nbsp; &nbsp; const {inputCount} = this.state;&nbsp; &nbsp; &nbsp; &nbsp; let inputList = [];&nbsp; &nbsp; &nbsp; &nbsp; for (let i = 0; i < inputCount; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inputList.push(<MenuInput id={i} key={i} handleInput={this.handleInput}/>)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return inputList&nbsp; &nbsp; }&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; const {result} = this.state;&nbsp; &nbsp; &nbsp; &nbsp; console.log(result)&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.getInputList()}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={this.addInput}>Add Plate</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={this.saveData}>save</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; result.length > 0 && result.map(res => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const [menuName, menuList] = res;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div key={menuName}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <strong>Title : {menuName}</strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {menuList.map(menu => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const {plate, description, price} = menu;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div key={plate}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style={{marginRight : '10px'}}>plate : {plate}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style={{marginRight : '10px'}}>description : {description}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>price : {price}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }}