时间戳

首页 > 解决方案 > 如何将所选项目添加到表 Reactjs？

reactjs - 如何将所选项目添加到表 Reactjs？

问题描述

我是反应的初学者，我想从表格单元格中的选择选项中写入项目，但我不知道如何。

import React, {useState,useEffect} from 'react';
import {getMeals} from './../../../../../services/mealService';


function MakeMenuForm() {

    const [meals, setMeals] = useState([]);
    useEffect(() => {
        const onInit = async () => {
            let response = await getMeals();
            setMeals(response)
            console.log(response);
        }
        onInit();
    }, [])

    
    const [tableData, setTableData] = React.useState(meals);
    const [selected, setSelected] = React.useState("");

    function handleChange(event) {
        setSelected(event.target.value);
         let vals = event.target.value
         ? meals.filter(meal => meal.name === event.target.value)
         : meals;
        setTableData(vals);
    }

    return (
        <form>
            <label htmlFor="meal">Choose meal: </label>
            <select id="meal"  onChange={handleChange} >{meals.map(meal => <option value={meal.idMeal}>{meal.name}</option>)}</select> <br></br><br></br>

            <table border="1" >
                <thead>
                    <tr>
                        <th>Meal</th>
                        <th>Contect</th>
                        <th>Price</th>
                        <th>Meal type</th>
                    </tr>
                </thead>
                <tbody>
                    {tableData.map(meal =>(
                    <tr>
                        <td>{meal.name}</td>
                        <td>{meal.content}</td>
                        <td>{meal.price}</td>
                        <td>{meal.mealType}</td>

                    </tr>
                    ))}
                </tbody>
            </table>

        </form>
    )
}

export default MakeMenuForm;

这是我的错误尝试：D

在此处输入图像描述

标签： reactjs

解决方案

在你的处理程序中，你正在做这个比较：

meals.filter(meal => meal.name === event.target.value)

您传入的值是 idMeal ( <option value={meal.idMeal}>)，因此将其更改为：

meals.filter(meal => meal.idMeal=== event.target.value)

比较 name === idMeal 几乎肯定每次都会返回 0 个结果，这就是您的表为空的原因。

推荐阅读