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

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 {

    render() {
        const {id, handleInput} = this.props;
        return (
            <div>
                Title : <input name="title" onChange={(e) => handleInput(id, e)}/>
                Plate : <input name="plate" onChange={(e) => handleInput(id, e)}/>
                Description : <input name="description" onChange={(e) => handleInput(id, e)}/>
                Price : <input  name="price" onChange={(e) => handleInput(id, e)}/>
            </div>
        )
    }
}

export default class Menu extends React.Component {

    state = {
        inputCount: 1,
        inputData: [[]],
        result: []
    }

    saveData = (e) => {
        const {inputData, result} = this.state;
        inputData.forEach(input => {
            const {title, plate, description, price} = input;
            const findInputIndex = result.findIndex(data => data.indexOf(title) >= 0);
            if (findInputIndex >= 0) {
                const [menuName, menuList] = result[findInputIndex];
                result[findInputIndex] = [menuName, [...menuList, {plate, description, price}]]
            } else {
                result.push([title, [{plate, description, price}]])
            }
        });
        this.setState({
            result
        })
    }

    handleInput = (id, e) => {
        const {name, value} = e.target;
        const {inputData} = this.state;
        inputData[id] = {...inputData[id], [name]: value};
        this.setState({
            inputData
        })
    }

    addInput = () => {
        const {inputCount, inputData} = this.state;
        this.setState({
            inputCount: inputCount + 1,
            inputData: [...inputData, []]
        })
    };

    getInputList = () => {
        const {inputCount} = this.state;
        let inputList = [];
        for (let i = 0; i < inputCount; i++) {
            inputList.push(<MenuInput id={i} key={i} handleInput={this.handleInput}/>)
        }
        return inputList
    }

    render() {
        const {result} = this.state;
        console.log(result)
        return (
            <div>
                {this.getInputList()}
                <button onClick={this.addInput}>Add Plate</button>
                <br/>
                <button onClick={this.saveData}>save</button>
                {
                    result.length > 0 && result.map(res => {
                        const [menuName, menuList] = res;
                        return (
                            <div key={menuName}>
                                <strong>Title : {menuName}</strong>
                                {menuList.map(menu => {
                                    const {plate, description, price} = menu;
                                    return(
                                        <div key={plate}>
                                            <span style={{marginRight : '10px'}}>plate : {plate}</span>
                                            <span style={{marginRight : '10px'}}>description : {description}</span>
                                            <span>price : {price}</span>
                                        </div>
                                    )
                                })}
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}