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

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>

        )

    }

}