largeQ
我也想知道怎么做，所以我做了它来练习。我希望它有帮助。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> ) }}