使用 React 將來自 textarea/form 的輸入添加到列表中

Question

我正在學習成為一名前端開發人員，現在反應在菜單上。 我需要創建一個包含購物清單和購物車的 react-app。 我可以將物品添加到購物清單中，最終我可以單擊它們將它們轉移到購物車中。

整個反應樹般的體驗是相當新的和壓倒性的。 但我的問題是，我需要將從輸入字段獲得的數據添加到 UL/LI。

我有一個 GroceryList 組件、一個 InputField 組件、一個 List 組件和一個 ListItem 組件。

我現在為 InputField 編寫的代碼有點工作，但它直接在屏幕上顯示信息，而不是在提交時顯示。

代碼是：

import React, { useState } from "react";
import { ReactDOM } from "react";


function InputField(props) {



    return (

        < div >
            <form>
                <input type="text" onChange={(event) => props.setGroceryName(event.target.value)} />
                <button type="submit" >Add Groceries</button>
            </form>
        </div >
    )
    
}


export default InputField

我在 GroceryList 組件中定義了 setGroceryName。 有人可以幫助我如何更改它，以便在 List 組件中創建一個列表嗎？ 我真的被困住了，似乎找不到一些好的幫助。 或者我需要做什么，我需要把它放在哪里，所以它需要一個 ListItem 並將其添加到 List 組件中。

提前致謝。 如果你們需要更多信息，請告訴我。

Answer 1

import React, { Component } from 'react'

export default class Test extends Component {

    state = {
        grocery: '',
        groceryList: []
    }
    render() {
        return (
            <div>
                <form>
                    <input type="text" onChange={(e) => this.setState({ grocery: e.target.value })} />
                    <button type="submit" onClick={e => this.setState({ groceryList: [...this.state.groceryList, this.state.grocery], grocery: '' })}>Add Groceries</button>
                </form>
            </div>
        )
    }
}

每次新雜貨商品的文本發生變化時，您需要 setState 並在單擊按鈕時將其添加到groceryList 數組，並將初始文本設置為空數組。